/* Florir V2 tokens. Rules and usage: DESIGN.md. Every component in both themes, live: library.html.
   Four layers, each "florir" or "twain", so the duel can swap one thing at a time:
     data-palette  colors
     data-type     fonts and weights
     data-form     radii, card edges, labels and icon stroke
     data-mark     wordmark and flower
   Put all four on the same element (Florir.brand(el, "twain") in screens.js does it). Some tokens read another
   layer's token, and that only resolves right when the layers sit on one element.
   Colors are light-dark(light, dark) and follow color-scheme: light by default, dark from the system unless
   <html data-theme="light">, forced with <html data-theme="dark">, and data-mode="light|dark" pins one frame.
   Blocks: 1 font, 2 mode, 3 constants, 4 palette, 5 type, 6 form, 7 mark. */

/* ---------- 1. Font: Outfit, local, OFL (fonts/LICENSE-outfit.txt) ---------- */
@font-face {
  font-family: "Outfit";
  src: url("fonts/outfit-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ---------- 2. Mode ---------- */
:root { color-scheme: light; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { color-scheme: dark; }
}
:root[data-theme="dark"] { color-scheme: dark; }
[data-mode="light"] { color-scheme: light; }
[data-mode="dark"] { color-scheme: dark; }

/* ---------- 3. Constants: the same in both themes (iPhone points, 1 CSS px = 1 pt) ---------- */
:root {
  --fs-large: 34px;    /* large title, one per screen */
  --fs-title: 28px;    /* screen title under a back button */
  --fs-h2: 22px;       /* card titles, the question */
  --fs-h3: 20px;
  --fs-body: 17px;     /* body, rows, buttons */
  --fs-callout: 16px;
  --fs-sub: 15px;      /* meta lines, segmented control */
  --fs-foot: 13px;     /* footnotes, dates, credits */
  --fs-cap: 12px;      /* tab labels, eyebrow labels (Florir) */
  --lh-body: 1.41;     /* 24/17 */
  --lh-snug: 1.27;
  --lh-tight: 1.2;

  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 32px;
  --sp-8: 40px;
  --gutter: 16px;      /* screen side margin */

  --r-pill: 999px;     /* everything you can press */
  --r-tag: 8px;
  --r-display: 47px;   /* iPhone 15 display corner */
  --tap: 44px;         /* smallest tap target */
  --status-h: 47px;
  --home-h: 34px;

  --bezel: #0E0E10;    /* the device around the screen, not part of the app */
  --error: light-dark(#A4262C, #FFB4AB);  /* red means error and nothing else */
  --media-scrim: rgb(0 0 0 / 45%);        /* round buttons on top of photos */
  --media-shade: rgb(0 0 0 / 58%);        /* behind text on video: white holds 5.3:1 even over white pixels */
  --on-media: #FFFFFF;
  --on-media-track: rgb(255 255 255 / 35%);  /* the scrub track on top of video */

  --dur: 200ms;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --ill-draw: 600ms;   /* a stroke drawing on, in drawings (tegning.js) */
}

/* ---------- 4. Palette ---------- */
/* Florir: offwhite, forest green and sage. Sage marks the next step. */
[data-palette="florir"] {
  --bg: light-dark(#FAFAF6, #121814);
  --surface: light-dark(#FFFFFF, #1B231E);
  --surface-2: light-dark(#F1F2EC, #242E27);
  --ink: light-dark(#1F2B24, #EEF1EC);
  --heading: light-dark(#304D3C, #D5E3D8);
  --muted: light-dark(#4F5B53, #B4BFB7);
  --faint: light-dark(#5F6A62, #A3AFA6);
  --hairline: light-dark(rgb(48 77 60 / 14%), rgb(238 241 236 / 12%));

  --action-bg: light-dark(#304D3C, #BFD8C5);   /* one primary button per card */
  --action-ink: light-dark(#FFFFFF, #10201A);
  --selected-bg: light-dark(#304D3C, #BFD8C5);
  --selected-ink: light-dark(#FFFFFF, #10201A);
  --progress: light-dark(#304D3C, #A9CDB3);
  --track: light-dark(rgb(48 77 60 / 16%), rgb(238 241 236 / 16%));

  --next-bg: light-dark(#E6ECE2, #243328);
  --next-ink: light-dark(#1F2B24, #EEF1EC);
  --next-muted: light-dark(#4F5B53, #B4BFB7);
  --next-action-bg: light-dark(#304D3C, #BFD8C5);
  --next-action-ink: light-dark(#FFFFFF, #10201A);
  --next-progress: light-dark(#304D3C, #A9CDB3);
  --next-track: light-dark(rgb(48 77 60 / 18%), rgb(238 241 236 / 16%));
  --next-stamp: light-dark(#D3DDCD, #2C3F31);   /* the faint stamp in the next step, tone in tone */

  --glass: light-dark(rgb(255 255 255 / 72%), rgb(27 35 30 / 72%));
  --glass-edge: light-dark(rgb(48 77 60 / 12%), rgb(238 241 236 / 12%));
  --focus: light-dark(#304D3C, #BFD8C5);

  --ill-line: var(--ink);                       /* drawings: the line */
  --ill-tone: light-dark(#E3E9DF, #2E3A32);     /* the disc and the tone under the line */
  --ill-paper: var(--surface);                  /* shapes filled inside the line */
  --ill-past: light-dark(#B7C2B9, #5B6A60);     /* what she has talked about */
  --ill-now: var(--next-bg);                    /* what she talks about now */
}

/* Twain: cream, butter and coal from the Twain OS day palette, as a fixed theme. Dark is the night phase.
   Butter means "this is your next step" and is used for nothing else. */
[data-palette="twain"] {
  --bg: light-dark(#F9F6EB, #252836);
  --surface: light-dark(#FDFCF9, #2E3242);
  --surface-2: light-dark(#F3EFE0, #383D50);
  --ink: light-dark(#2C2C2C, #F2EFE4);
  --heading: light-dark(#2C2C2C, #F2EFE4);
  --muted: light-dark(#5D574C, #B9BDCB);
  --faint: light-dark(#676155, #AEB2C1);
  --hairline: light-dark(rgb(44 44 44 / 10%), rgb(242 239 228 / 10%));

  --action-bg: light-dark(#2C2C2C, #F2EFE4);
  --action-ink: light-dark(#FFFFFF, #2C2C2C);
  --selected-bg: light-dark(#2C2C2C, #F2EFE4);
  --selected-ink: light-dark(#FFFFFF, #2C2C2C);
  --progress: light-dark(#2C2C2C, #F2EFE4);
  --track: light-dark(rgb(44 44 44 / 16%), rgb(242 239 228 / 18%));

  --next-bg: light-dark(#FDD861, #E3D89A);
  --next-ink: light-dark(#2C2C2C, #1F2230);
  --next-muted: light-dark(#4A4640, #3A3D4A);
  --next-action-bg: light-dark(#2C2C2C, #1F2230);
  --next-action-ink: light-dark(#FFFFFF, #F2EFE4);
  --next-progress: light-dark(#2C2C2C, #1F2230);
  --next-track: light-dark(rgb(44 44 44 / 18%), rgb(31 34 48 / 22%));
  --next-stamp: light-dark(#F4C63A, #D6C87C);   /* the faint stamp in the next step, tone in tone */

  --glass: light-dark(rgb(253 252 249 / 72%), rgb(46 50 66 / 72%));
  --glass-edge: light-dark(rgb(44 44 44 / 10%), rgb(242 239 228 / 12%));
  --focus: light-dark(#2C2C2C, #F2EFE4);

  /* Drawings: the tones are the Twain OS chart tones (--series-track, --series-3), so a drawing sits on cream
     like a chart does. Butter behind what she talks about now, as for the next step. */
  --ill-line: var(--ink);
  --ill-tone: light-dark(#EAE5D3, #3F4457);
  --ill-paper: var(--surface);
  --ill-past: light-dark(#C9C4B4, #6E7388);
  --ill-now: var(--next-bg);
}

/* Duel option: butter as the next step on the Florir palette (row M5). */
[data-next="butter"] {
  --next-bg: light-dark(#FDD861, #E3D89A);
  --next-ink: light-dark(#2C2C2C, #1F2230);
  --next-muted: light-dark(#4A4640, #3A3D4A);
  --next-action-bg: light-dark(#2C2C2C, #1F2230);
  --next-action-ink: light-dark(#FFFFFF, #F2EFE4);
  --next-progress: light-dark(#2C2C2C, #1F2230);
  --next-track: light-dark(rgb(44 44 44 / 18%), rgb(31 34 48 / 22%));
  --next-stamp: light-dark(#F4C63A, #D6C87C);   /* the faint stamp in the next step, tone in tone */
}

/* ---------- 5. Type ---------- */
/* Florir: ui-serif is New York on iPhone and in Safari, Georgia elsewhere. Text in the system font. */
[data-type="florir"] {
  --font-display: ui-serif, "New York", Georgia, "Times New Roman", serif;
  --font-text: -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", sans-serif;
  --fw-display: 500;
  --fw-strong: 600;
  --tracking-display: -0.01em;
  --quote-style: italic;
}
/* Twain: Outfit everywhere, light titles. */
[data-type="twain"] {
  --font-display: "Outfit", "Avenir Next", Avenir, -apple-system, system-ui, sans-serif;
  --font-text: "Outfit", "Avenir Next", Avenir, -apple-system, system-ui, sans-serif;
  --fw-display: 300;
  --fw-strong: 500;
  --tracking-display: -0.02em;
  --quote-style: normal;
}

/* ---------- 6. Form ---------- */
/* Florir: white cards with a hairline, uppercase eyebrow labels. */
[data-form="florir"] {
  --r-card: 20px;
  --r-tile: 12px;
  --r-media: 16px;
  --card-bg: var(--surface);
  --inset-bg: var(--surface-2);    /* icon circles, fields and secondary buttons inside a card */
  --card-edge: var(--hairline);
  --label-case: uppercase;
  --label-tracking: .08em;
  --label-size: 12px;
  --label-weight: 600;
  --label-color: var(--heading);
  --icon-stroke: 1.75;
}
/* Twain: tone layers without borders, larger radii, labels in sentence case. */
[data-form="twain"] {
  --r-card: 24px;
  --r-tile: 16px;
  --r-media: 20px;
  --card-bg: var(--surface-2);
  --inset-bg: var(--surface);
  --card-edge: transparent;
  --label-case: none;
  --label-tracking: 0;
  --label-size: 15px;
  --label-weight: 500;
  --label-color: var(--muted);
  --icon-stroke: 1.75;   /* Twain OS: Lucide at 1.75 */
}

/* ---------- 7. Mark (placeholder flower, same drawing in both) ---------- */
[data-mark="florir"] {
  --mark-font: ui-serif, "New York", Georgia, "Times New Roman", serif;
  --mark-size: 15px;
  --mark-weight: 600;
  --mark-case: uppercase;
  --mark-tracking: .2em;
  --mark-ink: light-dark(#304D3C, #D5E3D8);
  --mark-edge: transparent;
  --mark-pad: 0;
  --flower: light-dark(#6F8FD6, #8FA9E6);
  --stem: light-dark(#4D7A5A, #7FAA8A);
}
[data-mark="twain"] {
  --mark-font: "Outfit", "Avenir Next", Avenir, -apple-system, system-ui, sans-serif;
  --mark-size: 17px;
  --mark-weight: 300;
  --mark-case: lowercase;
  --mark-tracking: .02em;
  --mark-ink: light-dark(#2C2C2C, #F2EFE4);
  --mark-edge: currentColor;
  --mark-pad: 3px 12px 3px 9px;
  --flower: light-dark(#2C2C2C, #F2EFE4);
  --stem: light-dark(#2C2C2C, #F2EFE4);
}