/*
 * Design tokens, Soklae brand system.
 *
 * Single declaration point of the palette: every other sheet reads these names and never writes
 * a colour literal. Values come from the brand guidelines, whose hexadecimal figures are the
 * reference. Where a guideline colour cannot carry text at the 4.5:1 floor, the sheet keeps the
 * guideline value for fills and borders and declares a separate bounded tone for text, rather
 * than silently shifting the brand colour: a fill and a label are not the same problem.
 *
 * Every bounded tone is measured against the DARKEST light surface of the stack, not against
 * white. A value that passes on white and fails on the ivory page background protects nothing,
 * because both backgrounds exist on the same screen. The contrast check of the tooling recomputes
 * all of these pairs and refuses any that falls under the floor.
 *
 * Brand tones come in two families that must not be confused: --ssf-*-tint is an opaque light
 * shade that can carry text, --ssf-*-wash is a translucent veil that takes the colour of whatever
 * sits behind it and is never a text background on its own.
 *
 * The brand green carries text only from 14px upwards and with a semibold weight, through
 * --ssf-brand-text. Below that size, and on any thin icon, text takes --ssf-text: the guidelines
 * reserve the green for backgrounds, borders and buttons.
 */

:root {
	/* Brand green. Backgrounds, borders and buttons. */
	--ssf-primary: #2F3A31;
	--ssf-primary-rgb: 47, 58, 49;
	--ssf-primary-tint: #E3E5DD;
	--ssf-primary-wash: rgba(47, 58, 49, 0.08);

	/* Brand tone bounded to a 4.5:1 contrast against every light surface: it carries the colour
	   AND the legibility, which a raw brand colour does not guarantee. */
	--ssf-brand-text: #2F3A31;

	/* Deep green. The shade a pressed or hovered primary button falls to, and the footer fill.
	   Declared rather than computed: a filter would also darken the label, and a hard coded
	   shade in a component sheet would drift from the palette. */
	--ssf-primary-strong: #1E2620;
	/* The deep green as a triplet: Bootstrap composes a hovered link from a triplet, and without
	   one every link of the bundled framework falls back to its own blue on hover. */
	--ssf-primary-strong-rgb: 30, 38, 32;
	--ssf-on-primary: #F1EEE5;
	/* The same ivory as a triplet. The management rail paints its own links and separators
	   as veils of the text colour over the green fill, and a veil cannot be written from an
	   opaque token: only a triplet lets a rule choose its own alpha. */
	--ssf-on-primary-rgb: 241, 238, 229;

	/* Brass as it may be READ on the brand green. The guideline brass sits at 4.38 against it,
	   which is under the floor, and the eyebrow of the management rail is small uppercase text.
	   Lightened until it clears 4.5 rather than dropped: the brass is what tells the rail apart
	   from the ivory of the labels. */
	--ssf-on-primary-eyebrow: #BFA675;

	/* Brass. Premium details and the production marker, in small doses, never on small text. */
	--ssf-accent: #B49A68;
	--ssf-accent-rgb: 180, 154, 104;
	--ssf-accent-tint: #EEE8DA;
	--ssf-accent-wash: rgba(180, 154, 104, 0.16);
	--ssf-accent-text: #756444;
	--ssf-on-accent: #22271F;

	/* Sage. Soft fills and illustrations, never body text. */
	--ssf-sage: #8FA08E;
	--ssf-sage-rgb: 143, 160, 142;

	/* Ink, slate grey, and a mist grey bounded for text. The guideline mist grey sits at 2.4:1
	   and is a fill tone: a placeholder is text and has to be read. */
	--ssf-text: #22271F;
	--ssf-text-rgb: 34, 39, 31;
	--ssf-text-muted: #5A6157;
	--ssf-text-subtle: #656761;

	--ssf-surface: #FFFFFF;
	--ssf-surface-raised: #FBF9F3;
	--ssf-surface-alt: #F1EEE5;

	/* Rule colour for separators, and a darker one for the boundary of an input, which has to
	   reach 3:1 to be identified as a control. */
	--ssf-border: #DED9CC;
	--ssf-border-strong: #86827B;

	/* Semantic pairs. The base value is the guideline colour and fills or outlines; the -text
	   value is the same hue bounded for a label. A filled semantic banner carries --ssf-text on
	   the amber and --ssf-on-primary on the two darker ones. */
	--ssf-success: #4B7558;
	--ssf-success-rgb: 75, 117, 88;
	--ssf-success-text: #476F53;
	--ssf-warning: #C9A24B;
	--ssf-warning-rgb: 201, 162, 75;
	--ssf-warning-text: #7B632E;
	--ssf-error: #AD5047;
	--ssf-error-rgb: 173, 80, 71;
	--ssf-error-wash: rgba(173, 80, 71, 0.12);
	--ssf-error-text: #A24C43;
	--ssf-info: #5A7D8C;
	--ssf-info-text: #4D6A77;

	/* A tone measured on the bare card has to be measured again on every wash laid under it: a
	   wash carries the colour of what sits behind it, and the token level calculation sees
	   neither the veil nor the opacity. These two carry a label that sits on its own wash, which
	   is why they exist beside the plain -text pair rather than reusing it. */
	--ssf-success-tint-text: #456B50;
	--ssf-accent-tint-text: #716142;

	/* Chart series, five slots and no sixth. The slot number is written by the server, never
	   deduced from the position of a series in the document, so a series dropped by a filter
	   leaves the colours of the ones that stay exactly where they were.

	   Every value is a guideline colour: the brand green, the slate blue of the information
	   tone, the terracotta of the error tone, the brass and the sage. What was chosen here is
	   their LIGHTNESS: the five sit on a rising ladder of relative luminance, 0.030, 0.058,
	   0.090, 0.145 and 0.212, so that a reader who does not separate a green from a terracotta
	   still separates them by weight. The ladder stops at 0.212 because a fill has to clear 3:1
	   against the darkest light surface of the stack, the green tint, and 0.225 is where that
	   floor sits. Measured worst cases: 10.32, 7.65, 5.90, 4.24 and 3.15 to one.

	   The triplet exists beside each colour because a bar carries a texture as well as a hue,
	   and a texture is a veil the rule has to set its own alpha on.

	   Colour is never the only difference: the sheet gives each slot its own pattern and the
	   legend always carries the words. */
	--ssf-series-1: #263425;
	--ssf-series-1-rgb: 38, 52, 37;
	--ssf-series-2: #2A4856;
	--ssf-series-2-rgb: 42, 72, 86;
	--ssf-series-3: #854133;
	--ssf-series-3-rgb: 133, 65, 51;
	--ssf-series-4: #826633;
	--ssf-series-4-rgb: 130, 102, 51;
	--ssf-series-5: #6C8665;
	--ssf-series-5-rgb: 108, 134, 101;

	/* Environment marker. Demonstration and production share one green, so the accent rule that
	   tells them apart is a colour only production declares. A transparent default keeps the
	   reading rule valid on every other surface. */
	--ssf-env-marker: transparent;

	/* Radii, shadows and spacing of the guidelines. Shadows are low, soft and ink tinted. */
	--ssf-radius-sm: 6px;
	--ssf-radius: 10px;
	--ssf-radius-lg: 16px;
	--ssf-radius-pill: 999px;
	--ssf-shadow: 0 4px 16px rgba(34, 39, 31, 0.08);
	--ssf-shadow-float: 0 12px 32px rgba(34, 39, 31, 0.12);
	--ssf-transition: 160ms ease;

	/* Focus ring of the light surfaces, card and page alike. It is a named token rather than a
	   literal so the runtime check can name what it measured. The brass of the guidelines sits at
	   2.76 against the green tint, under the 3:1 an outline needs, so the ring takes the same hue
	   darkened until it clears every light surface of the stack. The panel carries its own ring,
	   declared per scheme below: one value cannot serve an ivory card and a deep green panel. */
	--ssf-focus-ring: #8C7647;

	/* Ambience layer offset of the wizard panel, 0 to 1, written as an inline style from the step
	   index. Declared here with a neutral default because a var() read that no declaration carries
	   is a defect: with a fallback the choice is never followed, without one the whole declaration
	   is dropped. */
	--ssf-aura-shift: 0;

	--ssf-space-1: 0.25rem;
	--ssf-space-2: 0.5rem;
	--ssf-space-3: 0.75rem;
	--ssf-space-4: 1rem;
	--ssf-space-5: 1.5rem;
	--ssf-space-6: 2rem;
	--ssf-space-7: 3rem;
	--ssf-space-8: 4rem;

	/* The chevron of a list on a dark surface, the one colour an image cannot read as a token:
	   a data URI is a separate document and resolves no custom property. Its stroke is the dark
	   arm of --ssf-text. */
	--ssf-chevron-dark: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23F1EEE5' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");

	/* The close cross of the framework, drawn in the same ivory for a dark surface. Inverting the
	   light glyph with a filter would invert its focus outline too, which then falls under the
	   contrast a ring needs. */
	--ssf-close-dark: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23F1EEE5'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414'/%3e%3c/svg%3e");

	/* Frame of the shell of both areas, whose root is .ssf-cs. The folded rail width is also
	   compared by the shell script, which is why it lives here and not in the sheet alone. */
	--ssf-cs-rail-w: 260px;
	--ssf-cs-rail-folded: 72px;
	--ssf-cs-head-h: 64px;
	--ssf-cs-gutter: 12px;
	--ssf-cs-gutter-sm: 10px;
	--ssf-cs-drawer-w: 290px;
	--ssf-cs-bar-reserve: 96px;

	/* Marcellus carries the headings, Mulish the body. Both ship with the plugin. Marcellus has
	   no Cyrillic coverage, so a Russian heading falls to the serif fallback, which is why the
	   fallback is a classic serif and not a sans. */
	--ssf-font-body: "Mulish", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--ssf-font-display: "Marcellus", Georgia, "Times New Roman", Times, serif;

	--ssf-size-display: 2.75rem;
	--ssf-size-h1: 2.25rem;
	--ssf-size-h2: 1.75rem;
	--ssf-size-h3: 1.375rem;
	--ssf-size-lead: 1.125rem;
	--ssf-size-body: 1rem;
	--ssf-size-small: 0.875rem;
	--ssf-size-eyebrow: 0.8125rem;
	--ssf-size-caption: 0.75rem;

	--ssf-leading-display: 1.15;
	--ssf-leading-h1: 1.2;
	--ssf-leading-h2: 1.25;
	--ssf-leading-h3: 1.3;
	--ssf-leading-eyebrow: 1.4;
	--ssf-leading-body: 1.6;
	--ssf-leading-small: 1.55;
	--ssf-leading-caption: 1.5;

	/* What is really visible, and how much of it the software keyboard covers. Both carry a
	   fallback that holds with no script at all: 100dvh is what the sheets did before, and nought
	   is the right keyboard height while nobody is measuring. ssf-viewport.js is the only writer. */
	--ssf-viewport-h: 100dvh;
	--ssf-keyboard-h: 0px;

	/* The floor of a touch target, and the measured height of the action bar of the wizard. The
	   second is rewritten by the script that observes the bar: it grows when the state line opens
	   under the buttons, so a figure written into a rule would be wrong half the time. */
	--ssf-tap: 44px;
	--ssf-actions-h: 84px;
}

/*
 * Wizard panel, two schemes. The card and the page stay light in both: what the toggle commands is
 * the panel, not a dark mode. The wizard reads no scheme of the system and carries neither class
 * of the themed block at the end of this sheet, so its surfaces keep the light values of :root
 * whatever the machine of the visitor is set to.
 *
 * Signature panel is a gradient, so every tone is bounded against BOTH of its stops, the lighter
 * one being the binding case. The light scheme panel is a flat sage on purpose: a gradient would
 * give a range of luminances and each tone would have to hold against two of them, while a flat
 * fill gives one measurable value. On that sage no colour lighter than the fill reaches 3:1, white
 * itself topping out at 2.77, so everything meant to be seen there is darker than its background.
 *
 * The signature values are also attached to the bare component: the attribute is written server
 * side and again by the anti-flash block before first paint, but a panel with no tones at all is a
 * worse failure than a panel in the wrong one.
 */
.ssf-wizard,
.ssf-wizard[data-ssf-scheme="signature"] {
	--ssf-panel-from: #2F3A31;
	--ssf-panel-to: #1E2620;
	--ssf-on-panel: #F1EEE5;
	--ssf-on-panel-muted: #C8CEC4;
	--ssf-on-panel-soft: #C0C1B8;
	--ssf-on-panel-eyebrow: #B69D6D;
	--ssf-on-panel-line: #7D8279;
	--ssf-panel-meter-done: #B49A68;
	--ssf-panel-meter-now: #F1EEE5;
	--ssf-panel-card: rgba(241, 238, 229, 0.06);
	--ssf-panel-quote: rgba(30, 38, 32, 0.55);
	--ssf-panel-filet: #B49A68;
	--ssf-focus-ring-panel: #B69D6D;
}

.ssf-wizard[data-ssf-scheme="light"] {
	--ssf-panel-from: #8FA08E;
	--ssf-panel-to: #8FA08E;
	--ssf-on-panel: #22271F;
	--ssf-on-panel-muted: #22271F;
	--ssf-on-panel-soft: #22271F;
	--ssf-on-panel-eyebrow: #1E2620;
	--ssf-on-panel-line: #485047;
	--ssf-panel-meter-done: #2F3A31;
	--ssf-panel-meter-now: #22271F;
	/* Opaque here, not a veil: the help card has to be a surface of its own so the ink on it is
	   measured against the card and not against the sage, which would leave it at 5.51 instead of
	   14.47 and would move with whatever the panel does. */
	--ssf-panel-card: #FBF9F3;
	--ssf-panel-quote: #E3E5DD;
	/* The brass rule renders 1.02 on the sage and simply disappears, so the light scheme rule is
	   the brand green. */
	--ssf-panel-filet: #2F3A31;
	--ssf-focus-ring-panel: #2F3A31;
}

/* Production carries the brass rule and the brass label. The green does not move: two greens a
   few points apart would read as the same screen, and the guidelines hold one primary. */
.ssf-env-production {
	--ssf-env-marker: #B49A68;
}

/* Demonstration carries the slate blue. The two markers are never told apart by colour alone:
   the rule sits beside a pill that names the environment in words. */
.ssf-env-demonstration {
	--ssf-env-marker: #5A7D8C;
}

/* Surfaces that follow the scheme of a shell read their tokens here: the portal inside the shell
   of the booking plugin and the document of the client area, both declaring color-scheme on
   their root. This first block is the light set alone, for an engine that ignores light-dark():
   each value equals the first arm of the block below. */
.ssf-pt, .ssf-cs-doc {
	--ssf-surface: #FFFFFF;
	--ssf-surface-raised: #F1F3F7;
	--ssf-surface-alt: #F8F9FB;
	--ssf-primary-tint: #E3E5DD;
	--ssf-accent-tint: #EEE8DA;
	--ssf-text: #22271F;
	--ssf-text-muted: #5A6157;
	--ssf-text-subtle: #656761;
	--ssf-brand-text: #2F3A31;
	--ssf-accent-text: #756444;
	--ssf-success-text: #446C50;
	--ssf-warning-text: #7B632E;
	--ssf-error-text: #9E4940;
	--ssf-info-text: #4D6A77;
	--ssf-success-tint-text: #456B50;
	--ssf-accent-tint-text: #716142;
	--ssf-primary: #2F3A31;
	--ssf-primary-strong: #1E2620;
	--ssf-on-primary: #F1EEE5;
	--ssf-on-primary-eyebrow: #BFA675;
	--ssf-accent: #B49A68;
	--ssf-on-accent: #22271F;
	--ssf-border: #E6E9EF;
	--ssf-border-strong: #86827B;
	--ssf-focus-ring: #8C7647;
	--ssf-success: #4B7558;
	--ssf-warning: #C9A24B;
	--ssf-error: #AD5047;
	--ssf-info: #5A7D8C;
	--ssf-primary-wash: rgba(47, 58, 49, 0.10);
	--ssf-accent-wash: rgba(180, 154, 104, 0.16);
	--ssf-success-wash: rgba(75, 117, 88, 0.12);
	--ssf-warning-wash: rgba(201, 162, 75, 0.16);
	--ssf-error-wash: rgba(173, 80, 71, 0.12);
	--ssf-info-wash: rgba(90, 125, 140, 0.12);
	--ssf-shadow: 0 1px 2px rgba(16, 24, 40, 0.05), 0 8px 24px rgba(16, 24, 40, 0.06);
	--ssf-shadow-float: 0 12px 32px rgba(16, 24, 40, 0.12);
	--ssf-shadow-hair: 0 1px 3px rgba(16, 24, 40, 0.12);
	--ssf-on-media: #FFFFFF;
}

/* Each tone as light-dark(light, dark), resolved by the element that reads it, so a panel takes
   the scheme of whatever contains it; the tooling measures both arms. No -rgb triplet here: a
   triplet cannot carry two values, so no themed sheet reads one. The chart series are left out,
   since no themed surface draws a chart. */
@supports (color: light-dark(#000, #fff)) {
	.ssf-pt, .ssf-cs-doc {
		--ssf-surface: light-dark(#FFFFFF, #1A2027);
		--ssf-surface-raised: light-dark(#F1F3F7, #212934);
		--ssf-surface-alt: light-dark(#F8F9FB, #101418);
		--ssf-primary-tint: light-dark(#E3E5DD, #2A323C);
		--ssf-accent-tint: light-dark(#EEE8DA, #2A323C);
		--ssf-text: light-dark(#22271F, #F1EEE5);
		--ssf-text-muted: light-dark(#5A6157, #C2C8BE);
		--ssf-text-subtle: light-dark(#656761, #9A9E94);
		--ssf-brand-text: light-dark(#2F3A31, #90A18F);
		--ssf-accent-text: light-dark(#756444, #B49A68);
		--ssf-success-text: light-dark(#446C50, #86B494);
		--ssf-warning-text: light-dark(#7B632E, #C9A24B);
		--ssf-error-text: light-dark(#9E4940, #E3948B);
		--ssf-info-text: light-dark(#4D6A77, #8FB4C4);
		--ssf-success-tint-text: light-dark(#456B50, #7FB08D);
		--ssf-accent-tint-text: light-dark(#716142, #B49A68);
		--ssf-primary: light-dark(#2F3A31, #8FA08E);
		--ssf-primary-strong: light-dark(#1E2620, #AFBBAE);
		--ssf-on-primary: light-dark(#F1EEE5, #22271F);
		--ssf-on-primary-eyebrow: light-dark(#BFA675, #3B3218);
		--ssf-accent: light-dark(#B49A68, #B49A68);
		--ssf-on-accent: light-dark(#22271F, #22271F);
		--ssf-border: light-dark(#E6E9EF, #2A323C);
		--ssf-border-strong: light-dark(#86827B, #738175);
		--ssf-focus-ring: light-dark(#8C7647, #B49A68);
		--ssf-success: light-dark(#4B7558, #7FB08D);
		--ssf-warning: light-dark(#C9A24B, #C9A24B);
		--ssf-error: light-dark(#AD5047, #E08A80);
		--ssf-info: light-dark(#5A7D8C, #8FB4C4);
		--ssf-primary-wash: light-dark(rgba(47, 58, 49, 0.10), rgba(143, 160, 142, 0.18));
		--ssf-accent-wash: light-dark(rgba(180, 154, 104, 0.16), rgba(180, 154, 104, 0.20));
		--ssf-success-wash: light-dark(rgba(75, 117, 88, 0.12), rgba(127, 176, 141, 0.16));
		--ssf-warning-wash: light-dark(rgba(201, 162, 75, 0.16), rgba(201, 162, 75, 0.16));
		--ssf-error-wash: light-dark(rgba(173, 80, 71, 0.12), rgba(224, 138, 128, 0.16));
		--ssf-info-wash: light-dark(rgba(90, 125, 140, 0.12), rgba(143, 180, 196, 0.16));
		--ssf-shadow: 0 1px 2px light-dark(rgba(16, 24, 40, 0.05), rgba(0, 0, 0, 0.35)), 0 8px 24px light-dark(rgba(16, 24, 40, 0.06), rgba(0, 0, 0, 0.35));
		--ssf-shadow-float: 0 12px 32px light-dark(rgba(16, 24, 40, 0.12), rgba(0, 0, 0, 0.55));
		--ssf-shadow-hair: 0 1px 3px light-dark(rgba(16, 24, 40, 0.12), rgba(0, 0, 0, 0.45));
		--ssf-on-media: #FFFFFF;
	}
}