/* ============================================================================
   Brand profile — design tokens for the web.

   This file is one profile among several. The engine selects a profile at run
   time by the name of the directory that contains this file. Nothing here names
   the profile, and every path is relative to this directory. To add a profile,
   copy the directory, rename the copy, and replace the values. Keep the token
   names identical in every profile.

   WHERE THIS PALETTE COMES FROM. A meal outdoors, after dark: fired clay for the
   bowl, the Aegean for the crossing, olive for the grove, warm linen for the
   table, and a brown-black night instead of a corporate navy. No colour here is
   a screen colour. The single source of truth is the slidev deck brand profile
   ~/.claude/skills/slidev-deck/brands/syntrofi/ (brand.css + NOTES.md). Values
   are copied OUT of it, never back into it. If a value here disagrees with the
   deck, this profile is wrong.

   The deck is not a stylesheet you can paste. The deck has one flat set of
   variables; this profile has two layers, and the translation is the work.

   The tokens come in two layers. Read the rule before you use them:

   1. THE RAMP — the raw brand colours. They do not change with the theme.
      Use them when you need a specific brand colour (a chart series, an
      illustration, a PDF). Do not paint the interface with them.
   2. THE ROLES — what a colour is FOR. They flip with the theme.
      Paint the interface with these. A role token is always safe on the
      ground that its name implies.

   Rule: if you write `color:` or `background:` in application CSS, use a role
   token. `var(--ink)` is dark in both themes; `var(--fg)` is the text colour.

   HOW THE THEME SWITCHES — read this before you change a role.
   Each role holds both of its values in one `light-dark()` call, and
   `color-scheme` selects which one applies. There is no media query, and no
   value is written twice. The switch therefore works in BOTH directions:

     no attribute            -> `color-scheme: light dark` -> the system decides
     <html data-theme="light"> -> `color-scheme: light`    -> light, forced
     <html data-theme="dark">  -> `color-scheme: dark`     -> dark, forced

   WHO OWNS WHAT. This profile owns ONE rule: the default `color-scheme: light
   dark` below, without which its own `light-dark()` calls have no meaning. The
   APPLICATION owns the two rules that force a theme, and a test guards them:

     :root[data-theme="light"] { color-scheme: light; }   <- app.css
     :root[data-theme="dark"]  { color-scheme: dark; }    <- app.css

   Do not add them here as well. In the application they work for every profile,
   including one that forgets them; here they would protect this profile only.

   ⚠️ Do not "tidy up" either side. On 2026-08-22 the profile and the
   application each handed these two rules to the other in the same round. The
   rules then existed in neither file, `data-theme` had no effect, and forced
   light and forced dark both died silently while the application was live.
   Nothing reported it, because a missing rule is not an error. That is what
   the test is for.

   The attribute goes on the `<html>` element. `color-scheme` inherits, so an
   attribute on `<body>` leaves the page ground itself on the system theme.

   Because both values live in one declaration, a forced theme and a system
   theme give the SAME result. A half-flipped state cannot happen.

   Support: `light-dark()` needs Chrome 123, Safari 17.5 or Firefox 120 (all
   2024). An older browser drops every role token and paints the page in the
   default colours. The page stays readable; it loses the brand.

   HOW TO READ THE CONTRAST NUMBERS. Every ratio in the comments is calculated,
   not estimated. A ratio on a foreground role is the WORST of the three grounds
   in that theme — `--bg`, `--bg-raised` and `--bg-sunken` — so the number holds
   wherever you put the text. Light value first, dark value second, in the same
   order as the `light-dark()` call above it. The targets are 4.5:1 for text and
   3:1 for large text and for graphics.
   ============================================================================ */

@import url('./fonts/fonts.css');

:root {
  color-scheme: light dark;

  /* ---- Layer 1: the ramp — identical in light and dark -------------------- */

  /* Two self-hosted faces. The @font-face rules are in fonts/fonts.css.
     Alegreya Sans is humanist and slightly narrow — it holds a heading and it
     tires the eye at 16 px, so it is the display face only. Commissioner takes
     the body and the look survives. Both cover latin-ext, so Slovak sets in the
     brand's own face: ľ š č ť ž ý á í é ú ä ô ň ď ĺ ŕ. */
  --font-sans:       'Alegreya Sans', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-text:       'Commissioner', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono:       ui-monospace, SFMono-Regular, 'JetBrains Mono', Menlo, monospace;

  /* dark ground. Brown-black, the colour of a night with a fire in it, never a
     blue-black. */
  --base:            #2A2018;
  --base-deep:       #1B1410;
  --base-soft:       #3E3025;
  --base-line:       #57453A;

  /* accent — fired clay */
  --accent:          #E2703A;
  --accent-soft:     #F1A87C;
  --accent-deep:     #A44518;   /* the clay as TEXT on a light ground; 5.96:1 on --bg-raised,
                                   5.38:1 on --bg, 4.97:1 on --bg-sunken. The bright clay
                                   above is only 3.10:1 on --bg-raised and 2.59:1 on
                                   --bg-sunken — never set text in it on a light ground. */
  --accent-tint:     #FBEBE0;

  /* second accent and the status green */
  --second:          #00919D;   /* the Aegean */
  --green:           #5E8C3C;   /* olive */

  /* light ground — warm linen and warm paper, not white. A palette built on
     clay and linen goes cold the moment it sits on #fff. --surface is the page,
     --bg-raised below is the warm paper a card is cut from. */
  --surface:         #F7F0E4;
  --surface-deep:    #E7DAC6;
  --muted:           #675A4C;   /* 5.90:1 on --surface, 4.85:1 on --surface-deep */

  /* text on a light ground */
  --ink:             #2A2018;
  --ink-soft:        #4B3B2E;

  /* text on a dark ground — three steps, most to least prominent */
  --on-dark:         #F8F2E8;
  --on-dark-soft:    #DBCEBB;
  --on-dark-muted:   #AE9F8C;

  /* two states the deck profile has no colour for. The clay already owns the
     accent, so warn cannot be a second orange: it is the honey on the table,
     and danger is a wine red, far enough round the wheel to read as "not clay". */
  --warn:            #B8860F;
  --danger:          #96323C;

  /* ---- Shape — the same in both themes -----------------------------------
     Softer than the engine default: a tribe, not a dashboard. */
  --radius-sm:       12px;
  --radius:          16px;      /* the rounding this brand uses on buttons and cards */
  --radius-lg:       22px;
  --radius-pill:     999px;

  /* ---- Layer 2: the roles ------------------------------------------------
     Light value first, dark value second. A role whose two values are the same
     is written once — the brand fill does not change with the theme. */

  --bg:              light-dark(var(--surface), var(--base-deep));
  --bg-raised:       light-dark(#FFFCF7, var(--base));   /* warm paper. This is the deck's
                                                            --page-bg. Do not "correct" it
                                                            to #FFFFFF; see --surface. */
  --bg-sunken:       light-dark(#EFE7D9, #241B14);       /* a sunken ground — a switch track,
                                                            a quiet badge. --fg-muted keeps
                                                            5.44:1 light, 6.55:1 dark. */

  --fg:              light-dark(var(--ink), var(--on-dark));            /* 12.97:1 / 14.30:1 */
  --fg-soft:         light-dark(var(--ink-soft), var(--on-dark-soft));  /*  8.71:1 / 10.28:1 */
  --fg-muted:        light-dark(var(--muted), var(--on-dark-muted));    /*  5.44:1 /  6.17:1 */

  --line:            light-dark(rgba(42, 32, 24, .14), rgba(248, 242, 232, .16));
  --line-strong:     light-dark(rgba(42, 32, 24, .28), rgba(248, 242, 232, .32));

  /* An accent as a FOREGROUND is not the same colour as an accent as a FILL.
     The bright clay is 3.10:1 on --bg-raised and 2.59:1 on --bg-sunken, so the
     light value drops to --accent-deep. The dark value climbs to --accent-soft,
     because the bright clay reaches only 5.02:1 on --bg-raised and 3.96:1 on
     --accent-wash, where a badge would then fail. */
  --accent-fg:       light-dark(var(--accent-deep), var(--accent-soft));  /* 4.97:1 / 8.07:1 */
  --accent-fill:     var(--accent);
  --on-accent:       var(--base-deep);                 /* 5.73:1 on --accent-fill */

  /* The Aegean is a mid-luminance teal: it fails as text on a light ground
     (3.35:1 on --bg) and as text on a dark one (4.20:1 on --bg-raised). Both
     foreground values are therefore steps away from it, one down and one up.
     The FILL stays the brand teal. */
  --second-fg:       light-dark(#046C75, #3FBCC6);     /* 5.02:1 / 6.99:1 */
  --second-fill:     var(--second);
  --on-second:       var(--base-deep);                 /* 4.80:1 on --second-fill */

  --ok-fg:           light-dark(#456A2B, #8FBA64);     /* 5.11:1 / 7.11:1 */
  --ok-fill:         var(--green);
  --on-ok:           var(--base-deep);                 /* 4.59:1 on --ok-fill */

  --warn-fg:         light-dark(#7E5A00, #E7B44E);     /* 5.11:1 / 8.37:1 */
  --warn-fill:       var(--warn);
  --on-warn:         var(--base-deep);                 /* 5.59:1 on --warn-fill */

  --danger-fg:       light-dark(#8E2F38, #EE9A9F);     /* 6.54:1 / 7.40:1 */
  --danger-fill:     var(--danger);
  --on-danger:       #FFFFFF;                          /* 7.45:1 on --danger-fill */

  /* ⚠️ A FILL IS NOT GUARANTEED AGAINST THE GROUND. A fill does not flip with
     the theme, so one theme always sees it against a ground close to its own
     luminance. Measured, fill against the worst of the three grounds:

       --accent-fill  2.59:1 light   5.02:1 dark
       --second-fill  3.09:1 light   4.20:1 dark
       --ok-fill      3.23:1 light   4.01:1 dark
       --warn-fill    2.65:1 light   4.90:1 dark
       --danger-fill  6.07:1 light   2.14:1 dark

     Text ON a fill is safe — that is what the --on-* tokens above are measured
     for. The EDGE of the fill is not. So do not let a fill's edge be the only
     thing that carries a meaning: a solid button also carries its label, and a
     4 px rail also carries a wash behind the row. If you need a shape that is
     only colour, use --focus or a *-fg value, which are measured against the
     grounds. This is a property of the profile contract, not of this palette:
     the sibling profile `lubomier` measures 1.75:1 to 7.11:1 in the same place,
     against 2.14:1 to 6.07:1 here. Both profiles put their weakest edge on a
     different fill, so the rule is the contract, not one palette's mistake. */

  --focus:           light-dark(var(--accent-deep), var(--accent-soft));  /* 4.97:1 / 8.07:1;
                                                                             a ring needs 3:1 */

  /* A wash is a very light fill under a badge or a notice. Always put the
     matching *-fg on a wash, never --fg-muted. The ratios are that *-fg on
     that wash, light then dark. */
  --accent-wash:     light-dark(var(--accent-tint), #4A2C1E);  /* 5.25:1 / 6.37:1 */
  --second-wash:     light-dark(#E2F0F1, #16333A);             /* 5.27:1 / 5.88:1 */
  --ok-wash:         light-dark(#EAF1E0, #2C3720);             /* 5.42:1 / 5.60:1 */
  --warn-wash:       light-dark(#F8EED5, #3A2C16);             /* 5.43:1 / 7.11:1 */
  --danger-wash:     light-dark(#F8E6E5, #2B1618);             /* 6.67:1 / 7.93:1 */

  --overlay:         light-dark(rgba(42, 32, 24, .66), rgba(11, 7, 5, .72));

  /* `light-dark()` takes a colour, not a shadow list, so the tint is the token
     that flips and the geometry stays fixed. --shadow-1 and --shadow-2 keep
     their names and their meaning. */
  --shadow-tint-1:   light-dark(rgba(42, 32, 24, .10), rgba(0, 0, 0, .40));
  --shadow-tint-2:   light-dark(rgba(42, 32, 24, .08), rgba(0, 0, 0, .35));
  --shadow-tint-3:   light-dark(rgba(42, 32, 24, .18), rgba(0, 0, 0, .55));
  --shadow-1:        0 1px 2px var(--shadow-tint-1), 0 2px 8px var(--shadow-tint-2);
  --shadow-2:        0 12px 34px var(--shadow-tint-3);
}