/* ============================================================
   UnCommon Areas — Design Tokens
   A field guide to free space.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Funnel+Display:wght@300..800&family=Bricolage+Grotesque:opsz,wght@12..96,300..800&family=DM+Mono:wght@400;500&display=swap');

:root {
  /* ----------------------------------------
     COLOR — Jewels
     Each jewel maps to a category of third place.
     ---------------------------------------- */
  --emerald: #10543C;       /* Parks & gardens */
  --emerald-dark: #0A3C2A;
  --emerald-tint: #D6E5DC;

  --sapphire: #1E3A8A;      /* Water — rivers, fountains, shorelines */
  --sapphire-dark: #142764;
  --sapphire-tint: #D9DFEE;

  --amethyst: #5B2A86;      /* Civic interiors — libraries, lobbies */
  --amethyst-dark: #3D1C5B;
  --amethyst-tint: #E2D6EC;

  --garnet: #7A1F2B;        /* Gathering — community centers, courts */
  --garnet-dark: #511118;
  --garnet-tint: #ECD5D8;

  --citrine: #B8860B;       /* Plazas & markets — sun-warmed stone */
  --citrine-dark: #855F08;
  --citrine-tint: #F0E5C4;

  --teal: #0E5E63;          /* Trails & paths */
  --teal-dark: #074449;
  --teal-tint: #D2E3E4;

  --rose: #B5365A;          /* Events — gatherings, programs */
  --rose-dark: #82203F;
  --rose-tint: #F1D6DF;

  /* Ruby — destructive / caution actions (sign out, decline) and the
     impersonation banner. Distinct from --garnet, which is a category colour. */
  --ruby: #9B2033;
  --ruby-dark: #6E1424;
  --ruby-tint: #F0D9DD;

  /* Amber — "held for review" moderation states. Not a category colour. */
  --amber: #B47814;
  --amber-dark: #8A5A0A;
  --amber-tint: #F6E8CB;
  --amber-20: rgba(180, 120, 20, 0.28);

  /* Ruby/amber AS TEXT on the page surface — same flip rule as the jewels. */
  --ruby-onbg: var(--ruby);
  --amber-onbg: var(--amber-dark);

  /* A jewel used as TEXT on the page/card surface (not on a tint, not on a
     jewel). --*-dark reads well on light surfaces but goes muddy on the dark
     canvas, so this flips to a lightened jewel in dark mode. */
  --emerald-onbg: var(--emerald-dark);
  --sapphire-onbg: var(--sapphire-dark);
  --amethyst-onbg: var(--amethyst-dark);
  --garnet-onbg: var(--garnet-dark);
  --citrine-onbg: var(--citrine-dark);
  --teal-onbg: var(--teal-dark);
  --rose-onbg: var(--rose-dark);


  /* ----------------------------------------
     COLOR — Neutrals
     Warm bone canvas, deep ink for text.
     ---------------------------------------- */
  --bone: #F5F1E8;          /* Canvas */
  --bone-soft: #EDE7D7;
  --ivory: #FBF8F1;         /* Raised surface */
  --ink: #1A1815;           /* Body text */
  --ink-70: rgba(26, 24, 21, 0.70);
  --ink-40: rgba(26, 24, 21, 0.40);
  --ink-20: rgba(26, 24, 21, 0.20);
  --ink-10: rgba(26, 24, 21, 0.10);
  --ink-05: rgba(26, 24, 21, 0.05);

  /* Reverse (bone over jewel) — these stay LIGHT in dark mode (they sit on
     saturated jewels / dark heroes that don't change). */
  --bone-90: rgba(245, 241, 232, 0.90);
  --bone-80: rgba(245, 241, 232, 0.80);
  --bone-60: rgba(245, 241, 232, 0.60);

  /* A foreground that ALWAYS reads as light because it sits on a saturated
     jewel (button labels, pin glyphs, badges). Stable across light + dark so
     those never go dark-on-dark when the canvas flips. */
  --on-jewel: #F5F1E8;
  --pin-ring: #F5F1E8;
  /* Text/icons that sit on a LIGHT jewel tint (tints stay light in both modes,
     so this stays dark in both). */
  --on-tint: #1A1815;
  --on-tint-70: rgba(26, 24, 21, 0.72);
  --on-tint-40: rgba(26, 24, 21, 0.46);
  /* Muted foregrounds that ALWAYS sit on a saturated jewel / dark hero (stay
     light in both modes). Use these instead of --bone-80/60 when the surface
     underneath is a jewel, not an --ink card. */
  --on-jewel-80: rgba(245, 241, 232, 0.80);
  --on-jewel-60: rgba(245, 241, 232, 0.60);
  /* Translucent app chrome (tab bar, top bar) — flips with the theme. */
  --chrome: rgba(245, 241, 232, 0.90);

  /* ----------------------------------------
     COLOR — Semantic
     ---------------------------------------- */
  --bg: var(--bone);
  --surface: var(--ivory);
  --surface-raised: #FFFFFF;
  --fg: var(--ink);
  --fg-muted: var(--ink-70);
  --fg-subtle: var(--ink-40);
  --border: var(--ink-10);
  --border-strong: var(--ink-20);
  --accent: var(--emerald);
  --accent-fg: var(--bone);

  /* States */
  --success: var(--emerald);
  --warning: var(--citrine);
  --danger:  var(--garnet);
  --info:    var(--sapphire);

  /* ----------------------------------------
     TYPE — Families
     ---------------------------------------- */
  --font-display: 'Funnel Display', 'Bricolage Grotesque', -apple-system, system-ui, sans-serif;
  --font-body:    'Bricolage Grotesque', 'Inter', -apple-system, system-ui, sans-serif;
  --font-mono:    'DM Mono', 'JetBrains Mono', ui-monospace, monospace;

  /* ----------------------------------------
     TYPE — Scale
     Display uses serif. Body uses sans.
     ---------------------------------------- */
  --display-xl: 88px;       /* Marketing hero */
  --display-l:  64px;
  --display-m:  48px;
  --display-s:  36px;
  --h1:         32px;
  --h2:         24px;
  --h3:         20px;
  --body-l:     18px;
  --body:       16px;
  --body-s:     14px;
  --caption:    12px;
  --micro:      11px;

  --leading-display: 1.05;
  --leading-tight:   1.2;
  --leading-normal:  1.5;
  --leading-loose:   1.65;

  --tracking-display: -0.02em;
  --tracking-tight:   -0.01em;
  --tracking-normal:  0;
  --tracking-mono:    0.04em;
  --tracking-caps:    0.12em;

  /* ----------------------------------------
     SPACE — 4px base
     ---------------------------------------- */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  /* ----------------------------------------
     RADII
     ---------------------------------------- */
  --radius-tag:    4px;
  --radius-input:  8px;
  --radius-card:  12px;
  --radius-sheet: 20px;
  --radius-pill:  999px;

  /* ----------------------------------------
     SHADOWS — warm-tinted, two-stop
     ---------------------------------------- */
  --shadow-sm:
    0 1px 2px rgba(40, 28, 12, 0.06),
    0 1px 1px rgba(40, 28, 12, 0.04);
  --shadow-md:
    0 4px 8px rgba(40, 28, 12, 0.08),
    0 2px 3px rgba(40, 28, 12, 0.05);
  --shadow-lg:
    0 16px 32px rgba(40, 28, 12, 0.14),
    0 4px 8px rgba(40, 28, 12, 0.06);

  /* Focus ring (input on focus) */
  --ring: 0 0 0 3px color-mix(in oklch, var(--emerald) 35%, transparent);

  /* ----------------------------------------
     MOTION
     ---------------------------------------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* @kind other */
  --duration-fast: 120ms; /* @kind other */
  --duration-base: 200ms; /* @kind other */
  --duration-slow: 320ms; /* @kind other */
}

/* ============================================================
   DARK THEME — deep emerald-tinted black, echoing the warm bone canvas.
   Applied via <html data-theme="dark">. Only neutrals + shadows flip; the
   jewels stay saturated, and --on-jewel / --bone-9x stay light so anything
   sitting on a jewel keeps its light foreground.
   ============================================================ */
:root[data-theme="dark"] {
  color-scheme: dark;

  /* Ruby + amber as text on the dark canvas — lightened to clear contrast.
     The saturated --ruby itself stays put for banner backgrounds. */
  --ruby-onbg: #F09AA6;
  --amber-onbg: #E5B94A;
  --amber-tint: rgba(180, 120, 20, 0.16);

  /* Jewel-as-text on the dark canvas — lightened so it clears contrast. */
  --emerald-onbg: #6FBF9B;
  --sapphire-onbg: #8FA6E8;
  --amethyst-onbg: #BB94DD;
  --garnet-onbg: #E08D98;
  --citrine-onbg: #E5B94A;
  --teal-onbg: #64BFC4;
  --rose-onbg: #F090A9;


  /* Neutrals — emerald-black canvas, stepping up to raised surfaces */
  --bone: #0C1410;          /* Canvas */
  --bone-soft: #101B15;
  --ivory: #15221B;         /* Raised surface (cards) */
  --surface-raised: #1C2D24;

  /* Ink ramp inverts to a warm off-white */
  --ink: #ECE7DA;           /* Body text */
  --ink-70: rgba(236, 231, 218, 0.72);
  --ink-40: rgba(236, 231, 218, 0.46);
  --ink-20: rgba(236, 231, 218, 0.26);
  --ink-10: rgba(236, 231, 218, 0.14);
  --ink-05: rgba(236, 231, 218, 0.07);

  /* Semantic surfaces follow */
  --surface: var(--ivory);
  --chrome: rgba(11, 18, 14, 0.86);

  /* --bone-80/60 are muted TEXT on --ink cards, which flip to light here, so
     these flip to dark translucent to stay readable. (--bone-90 is a light
     surface — pin labels, map buttons — so it stays light, unset here.) */
  --bone-80: rgba(26, 24, 21, 0.72);
  --bone-60: rgba(26, 24, 21, 0.50);

  /* Shadows go to true black so they read on a dark canvas */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.40), 0 1px 1px rgba(0, 0, 0, 0.30);
  --shadow-md: 0 4px 10px rgba(0, 0, 0, 0.46), 0 2px 4px rgba(0, 0, 0, 0.34);
  --shadow-lg: 0 18px 38px rgba(0, 0, 0, 0.56), 0 6px 12px rgba(0, 0, 0, 0.40);

  --ring: 0 0 0 3px color-mix(in oklch, var(--emerald) 55%, transparent);
}

/* ============================================================
   Semantic type styles — ready-to-use classes
   ============================================================ */

.t-display-xl,
.t-display-l,
.t-display-m,
.t-display-s {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
  color: var(--fg);
}

.t-display-xl { font-size: var(--display-xl); }
.t-display-l  { font-size: var(--display-l); }
.t-display-m  { font-size: var(--display-m); }
.t-display-s  { font-size: var(--display-s); }

.t-h1, .t-h2, .t-h3 {
  font-family: var(--font-body);
  font-weight: 600;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
}
.t-h1 { font-size: var(--h1); }
.t-h2 { font-size: var(--h2); }
.t-h3 { font-size: var(--h3); font-weight: 500; }

.t-body-l,
.t-body,
.t-body-s {
  font-family: var(--font-body);
  font-weight: 400;
  line-height: var(--leading-normal);
  color: var(--fg);
}
.t-body-l { font-size: var(--body-l); }
.t-body   { font-size: var(--body); }
.t-body-s { font-size: var(--body-s); color: var(--fg-muted); }

.t-caption {
  font-family: var(--font-mono);
  font-size: var(--caption);
  font-weight: 500;
  letter-spacing: var(--tracking-mono);
  color: var(--fg-muted);
  text-transform: lowercase;
}

.t-micro {
  font-family: var(--font-mono);
  font-size: var(--micro);
  font-weight: 500;
  letter-spacing: var(--tracking-caps);
  color: var(--fg-muted);
  text-transform: uppercase;
}

.t-quote {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--display-s);
  line-height: 1.1;
  letter-spacing: var(--tracking-display);
  color: var(--fg);
}

/* ============================================================
   Base element resets (opt-in via class on <body>)
   ============================================================ */

.uca-base {
  font-family: var(--font-body);
  font-size: var(--body);
  line-height: var(--leading-normal);
  color: var(--fg);
  background: var(--bg);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.uca-base h1 { font: 400 var(--h1)/var(--leading-tight) var(--font-body); letter-spacing: var(--tracking-tight); margin: 0 0 var(--space-4); }
.uca-base h2 { font: 500 var(--h2)/var(--leading-tight) var(--font-body); letter-spacing: var(--tracking-tight); margin: 0 0 var(--space-3); }
.uca-base h3 { font: 500 var(--h3)/var(--leading-tight) var(--font-body); margin: 0 0 var(--space-3); }
.uca-base p  { margin: 0 0 var(--space-4); }
.uca-base a  {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: text-decoration-thickness var(--duration-base) var(--ease-out);
}
.uca-base a:hover { text-decoration-thickness: 2px; }