/* ============================================================================
   Tidbits — design tokens.  THE ONLY FILE ALLOWED TO CONTAIN HEX COLORS.
   Selectors are `:root, :host` so the very same sheet is correct in the
   library page AND inside the capture card's shadow root (the shadow host
   carries data-theme).  Every size runs through --ui-scale and is px-based on
   purpose: `rem` would resolve against the host page's <html> inside a shadow
   root, which is arbitrary.
   ========================================================================== */

:root, :host {
  --ui-scale: 1;

  /* ---- type ------------------------------------------------------------- */
  --font-display: "Fredoka", "Nunito", "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;
  --font-body: "Nunito", "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
  --font-mono: ui-monospace, "Cascadia Mono", Consolas, "Courier New", monospace;
  --fs-xs: calc(11px * var(--ui-scale));
  --fs-sm: calc(12.5px * var(--ui-scale));
  --fs-md: calc(14px * var(--ui-scale));
  --fs-lg: calc(16px * var(--ui-scale));
  --fs-xl: calc(20px * var(--ui-scale));
  --fs-xxl: calc(26px * var(--ui-scale));
  --lh: 1.5;
  --lh-tight: 1.25;
  --fw-regular: 400;
  --fw-medium: 600;
  --fw-bold: 700;

  /* ---- space (4px base) ------------------------------------------------- */
  --sp-1: calc(4px * var(--ui-scale));
  --sp-2: calc(8px * var(--ui-scale));
  --sp-3: calc(12px * var(--ui-scale));
  --sp-4: calc(16px * var(--ui-scale));
  --sp-5: calc(20px * var(--ui-scale));
  --sp-6: calc(24px * var(--ui-scale));
  --sp-7: calc(32px * var(--ui-scale));
  --sp-8: calc(40px * var(--ui-scale));

  /* ---- shape ------------------------------------------------------------ */
  --r-sm: calc(6px * var(--ui-scale));
  --r-md: calc(10px * var(--ui-scale));
  --r-lg: calc(16px * var(--ui-scale));
  --r-xl: calc(22px * var(--ui-scale));
  --r-pill: 999px;
  --control-h: calc(36px * var(--ui-scale));
  --control-h-sm: calc(28px * var(--ui-scale));

  /* ---- motion ----------------------------------------------------------- */
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 420ms;
  --ease-pop: cubic-bezier(.34, 1.56, .64, 1);
  --ease-out: cubic-bezier(.2, .7, .2, 1);

  /* ---- layout ----------------------------------------------------------- */
  --content-max: calc(780px * var(--ui-scale));
  --content-max-grid: calc(1560px * var(--ui-scale));
  --card-w: calc(420px * var(--ui-scale));
  --grid-min: calc(300px * var(--ui-scale));
  --z-top: 2147483647;

  /* ---- LIGHT palette (default) ----------------------------------------- */
  --bg: #FBF4E8;
  --bg-dots: rgba(120, 84, 48, 0.10);
  /* The paper texture is a token, not a hardcoded gradient, so a theme can
     swap fine grain for big Swiss holes without touching components.css. */
  --paper-image: radial-gradient(var(--bg-dots) 1px, transparent 1px);
  --paper-size: calc(18px * var(--ui-scale)) calc(18px * var(--ui-scale));
  --paper-position: 0 0;
  --surface: #FFFBF5;
  --surface-2: #F5EBDB;
  --surface-3: #EDDFC9;
  /* Fields sit recessed from the card they're on — see --field-border too. */
  --field-bg: #F3E7D2;
  --field-bg-focus: #FFFDF8;
  --field-border: rgba(61, 46, 34, 0.30);
  --text: #3D2E22;
  --text-muted: #8C7359;
  --text-faint: #A88F72;
  --border: rgba(61, 46, 34, 0.13);
  --border-strong: rgba(61, 46, 34, 0.26);
  --primary: #F6B88A;
  --primary-hover: #F2A96F;
  --primary-active: #E99A5B;
  --on-primary: #3D2E22;
  --accent: #E88AA0;
  --accent-soft: #FBE1E8;
  --on-solid: #FFFFFF;
  --success: #4E9B6F;
  --success-soft: #DDF0E3;
  --warning: #D9962B;
  --warning-soft: #FBEBC9;
  --danger: #D24D5A;
  --danger-soft: #FADCDF;
  --info: #5B84C9;
  --info-soft: #DDE7F8;
  --focus: rgba(232, 138, 160, 0.55);
  --scrim: rgba(61, 46, 34, 0.38);
  --shadow-sm: 0 1px 2px rgba(61, 46, 34, .08), 0 1px 1px rgba(61, 46, 34, .04);
  --shadow-md: 0 4px 14px rgba(61, 46, 34, .12), 0 1px 3px rgba(61, 46, 34, .06);
  --shadow-lg: 0 14px 40px rgba(61, 46, 34, .20), 0 2px 6px rgba(61, 46, 34, .08);

  /* importance scale 1 (meh) → 5 (urgent) */
  --imp-1: #7FA58B; --imp-1-soft: #E3EFE6;
  --imp-2: #6FA3D6; --imp-2-soft: #DFEBF8;
  --imp-3: #D9A62E; --imp-3-soft: #FBEFCB;
  --imp-4: #E8803E; --imp-4-soft: #FDE3D2;
  --imp-5: #DF4D63; --imp-5-soft: #FBD9DE;

  /* tag pastels, picked by name hash */
  --tag-0-bg: #E8E0F7; --tag-0-fg: #5A3E8F;
  --tag-1-bg: #D8F1E4; --tag-1-fg: #1F6B45;
  --tag-2-bg: #DAE9F9; --tag-2-fg: #2A5A93;
  --tag-3-bg: #FBF0C4; --tag-3-fg: #7A5A08;
  --tag-4-bg: #FCE2D0; --tag-4-fg: #8A4314;
  --tag-5-bg: #FBDCE3; --tag-5-fg: #93304A;
  --tag-6-bg: #F0DDF3; --tag-6-fg: #6E2E7A;
  --tag-7-bg: #E4EBD2; --tag-7-fg: #4D6416;

  color-scheme: light;
}

/* ---- DARK palette (cocoa) ---------------------------------------------- */
:root[data-theme="dark"], :host([data-theme="dark"]) {
  --bg: #211A15;
  --bg-dots: rgba(255, 235, 210, 0.07);
  --surface: #2B221C;
  --surface-2: #352A23;
  --surface-3: #41332A;
  /* Recessed here means darker than the card, not lighter. */
  --field-bg: #191310;
  --field-bg-focus: #221A15;
  --field-border: rgba(255, 235, 210, 0.28);
  --text: #F4E9DB;
  --text-muted: #B8A08A;
  --text-faint: #7F6C5B;
  --border: rgba(255, 235, 210, 0.11);
  --border-strong: rgba(255, 235, 210, 0.24);
  --primary: #F3AE7C;
  --primary-hover: #F7BC92;
  --primary-active: #E99A5B;
  --on-primary: #2A1D14;
  --accent: #F09BB0;
  --accent-soft: rgba(240, 155, 176, 0.18);
  --on-solid: #FFFFFF;
  --success: #6FBF90;
  --success-soft: rgba(111, 191, 144, 0.18);
  --warning: #E8B04A;
  --warning-soft: rgba(232, 176, 74, 0.18);
  --danger: #EA6B78;
  --danger-soft: rgba(234, 107, 120, 0.18);
  --info: #7FA3E0;
  --info-soft: rgba(127, 163, 224, 0.18);
  --focus: rgba(240, 155, 176, 0.55);
  --scrim: rgba(0, 0, 0, 0.6);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .35);
  --shadow-md: 0 6px 18px rgba(0, 0, 0, .40);
  --shadow-lg: 0 14px 40px rgba(0, 0, 0, .55);

  --imp-1: #8DBB9A; --imp-1-soft: rgba(141, 187, 154, 0.18);
  --imp-2: #82B4E3; --imp-2-soft: rgba(130, 180, 227, 0.18);
  --imp-3: #E9BC4E; --imp-3-soft: rgba(233, 188, 78, 0.18);
  --imp-4: #F29A5E; --imp-4-soft: rgba(242, 154, 94, 0.18);
  --imp-5: #F0697D; --imp-5-soft: rgba(240, 105, 125, 0.20);

  --tag-0-bg: rgba(167, 139, 224, 0.22); --tag-0-fg: #CDBCF3;
  --tag-1-bg: rgba(89, 194, 140, 0.20);  --tag-1-fg: #9FE1C0;
  --tag-2-bg: rgba(97, 160, 230, 0.22);  --tag-2-fg: #AFCFF5;
  --tag-3-bg: rgba(230, 200, 80, 0.20);  --tag-3-fg: #EFDC8C;
  --tag-4-bg: rgba(240, 150, 90, 0.22);  --tag-4-fg: #F8C7A4;
  --tag-5-bg: rgba(235, 120, 150, 0.22); --tag-5-fg: #F6BBCB;
  --tag-6-bg: rgba(200, 120, 220, 0.22); --tag-6-fg: #E5BCEF;
  --tag-7-bg: rgba(160, 190, 90, 0.22);  --tag-7-fg: #CFE0A0;

  color-scheme: dark;
}

/* ---- CHEESE palette (Swiss) ---------------------------------------------
   A wheel of cheese: warm butter-yellow ground with staggered dark holes,
   pale cream cards on top, cheddar for actions. Manual pick only — `auto`
   never resolves to this.
   ------------------------------------------------------------------------ */
:root[data-theme="cheese"], :host([data-theme="cheese"]) {
  --bg: #F6D24C;
  /* Dark enough to read as holes punched through the wheel rather than a
     tint of the yellow underneath. */
  --bg-dots: rgba(26, 18, 2, 0.46);
  /* Two offset layers of holes so the wheel doesn't read as a dot grid. */
  --paper-image:
    radial-gradient(circle, var(--bg-dots) calc(5.5px * var(--ui-scale)), transparent calc(6.2px * var(--ui-scale))),
    radial-gradient(circle, var(--bg-dots) calc(3px * var(--ui-scale)), transparent calc(3.6px * var(--ui-scale))),
    radial-gradient(circle, var(--bg-dots) calc(2px * var(--ui-scale)), transparent calc(2.5px * var(--ui-scale)));
  --paper-size:
    calc(132px * var(--ui-scale)) calc(132px * var(--ui-scale)),
    calc(132px * var(--ui-scale)) calc(132px * var(--ui-scale)),
    calc(132px * var(--ui-scale)) calc(132px * var(--ui-scale));
  --paper-position:
    0 0,
    calc(64px * var(--ui-scale)) calc(38px * var(--ui-scale)),
    calc(26px * var(--ui-scale)) calc(92px * var(--ui-scale));
  --surface: #FFF6D8;
  --surface-2: #FBEBB4;
  --surface-3: #F3DC8F;
  --field-bg: #F7E3A4;
  --field-bg-focus: #FFFBEA;
  --field-border: rgba(63, 44, 8, 0.34);
  --text: #3A2A0C;
  --text-muted: #7C6320;
  --text-faint: #A08643;
  --border: rgba(58, 42, 12, 0.16);
  --border-strong: rgba(58, 42, 12, 0.32);
  --primary: #E8913C;
  --primary-hover: #F09F4E;
  --primary-active: #D47F2C;
  --on-primary: #2E1F06;
  --accent: #B5763F;
  --accent-soft: #F6E2C4;
  --on-solid: #FFFFFF;
  --success: #4A7C3A;
  --success-soft: #DDEECF;
  --warning: #B8791B;
  --warning-soft: #F8E4B4;
  --danger: #BE3C33;
  --danger-soft: #F8D8CF;
  --info: #45689E;
  --info-soft: #DCE5F3;
  --focus: rgba(181, 118, 63, 0.55);
  --scrim: rgba(48, 33, 6, 0.45);
  --shadow-sm: 0 1px 2px rgba(64, 44, 8, .12), 0 1px 1px rgba(64, 44, 8, .06);
  --shadow-md: 0 4px 14px rgba(64, 44, 8, .18), 0 1px 3px rgba(64, 44, 8, .08);
  --shadow-lg: 0 14px 40px rgba(64, 44, 8, .28), 0 2px 6px rgba(64, 44, 8, .12);

  --imp-1: #5F8A55; --imp-1-soft: #E0EBD4;
  --imp-2: #4B7BAE; --imp-2-soft: #DCE6F2;
  --imp-3: #B07C12; --imp-3-soft: #F7E5B2;
  --imp-4: #D2701F; --imp-4-soft: #FADEC2;
  --imp-5: #BE3C33; --imp-5-soft: #F8D5CE;

  --tag-0-bg: #E2D6F2; --tag-0-fg: #52357F;
  --tag-1-bg: #D3EBD8; --tag-1-fg: #1E5E3C;
  --tag-2-bg: #D6E4F3; --tag-2-fg: #26507F;
  --tag-3-bg: #F7E5AE; --tag-3-fg: #6B4E06;
  --tag-4-bg: #FADCC2; --tag-4-fg: #7E3C10;
  --tag-5-bg: #F8D6DC; --tag-5-fg: #872C44;
  --tag-6-bg: #EED8F0; --tag-6-fg: #64286E;
  --tag-7-bg: #E0E8CA; --tag-7-fg: #465A12;

  color-scheme: light;
}