/* Poolio visual system — design tokens
 *
 * Standalone; not linked from any template yet.
 * Layers: primitives (--p-*) → semantic (--color-*, --text-*, --space-*, …).
 * Components should only use semantic tokens.
 * Every text/background pairing below meets WCAG AA (≥4.5:1 for text, ≥3:1 for UI borders/focus).
 */

:root {
  /* ── Primitives: brand hues (400 = brand swatch, kept from v7) ───────── */
  --p-pink-50:  #FFF0F6;
  --p-pink-100: #FFDCEA;
  --p-pink-300: #FF9DC3;
  --p-pink-400: #FF6FA5;
  --p-pink-600: #D63672;
  --p-pink-700: #B3245D;

  --p-lav-50:  #F5F1FF;
  --p-lav-100: #E9E1FF;
  --p-lav-300: #CBB8FF;
  --p-lav-400: #B69CFF;
  --p-lav-600: #7452D9;
  --p-lav-700: #5B3CC4;

  --p-mint-50:  #EAFBF5;
  --p-mint-100: #D3F7EA;
  --p-mint-400: #7FE7C4;
  --p-mint-700: #1C7A5A;
  --p-mint-800: #17513C;

  --p-amber-100: #FFEFC7;
  --p-amber-400: #FFC857;
  --p-amber-700: #8A5A00;
  --p-amber-800: #6B4600;

  --p-red-100: #FFE1E5;
  --p-red-300: #FF8A99;
  --p-red-700: #B42335;

  /* ink-tinted neutrals (warm violet-grey, matches v7 --ink) */
  --p-n-0:   #FFFFFF;
  --p-n-25:  #FFF7FA;
  --p-n-50:  #F6EEF3;
  --p-n-100: #EEE4EC;
  --p-n-200: #D9CCD9;
  --p-n-400: #8E8199;
  --p-n-600: #6E6279;
  --p-n-800: #2E2438;
  --p-n-900: #2A1F33;

  --p-d-0:   #17131F;
  --p-d-50:  #1D1828;
  --p-d-100: #221C2E;
  --p-d-200: #2C2540;
  --p-d-300: #3A3150;
  --p-d-400: #82769A;
  --p-d-600: #B3A8C2;
  --p-d-900: #F3EDF7;

  /* ── Semantic colour (light) ─────────────────────────────────────────── */
  --color-bg:              var(--p-n-25);
  --color-surface:         var(--p-n-0);
  --color-surface-sunken:  var(--p-n-50);
  --color-surface-raised:  var(--p-n-0);
  --color-overlay:         rgb(42 31 51 / .48);

  --color-text:            var(--p-n-800);   /* 13.9:1 on bg */
  --color-text-muted:      var(--p-n-600);   /*  5.4:1 on bg, 5.0 on sunken */
  --color-text-inverse:    var(--p-n-0);

  --color-border:          var(--p-n-200);   /* decorative dividers */
  --color-border-strong:   var(--p-n-400);   /* inputs, 3.5:1 */

  --color-link:            var(--p-lav-700); /*  6.9:1 */
  --color-link-hover:      var(--p-lav-600);

  /* Role colours — v7 rule kept: pink = money, lavender = info, mint = progress */
  --color-money:           var(--p-pink-400);  /* fills */
  --color-on-money:        var(--p-n-900);     /* 6.0:1 on pink-400 */
  --color-money-strong:    var(--p-pink-600);  /* fill w/ white text, 4.5:1 */
  --color-money-text:      var(--p-pink-700);  /* pink as text, 6.0:1 */
  --color-money-subtle:    var(--p-pink-50);

  --color-info:            var(--p-lav-600);   /* white text 5.3:1 */
  --color-on-info:         var(--p-n-0);
  --color-info-text:       var(--p-lav-700);
  --color-info-subtle:     var(--p-lav-50);

  --color-progress:        var(--p-mint-400);
  --color-on-progress:     var(--p-mint-800);
  --color-progress-text:   var(--p-mint-700);
  --color-progress-subtle: var(--p-mint-100);
  --color-progress-track:  var(--p-n-100);

  --color-warning-text:    var(--p-amber-700);
  --color-warning-subtle:  var(--p-amber-100);
  --color-on-warning-subtle: var(--p-amber-800);
  --color-danger-text:     var(--p-red-700);
  --color-danger-subtle:   var(--p-red-100);

  --color-focus:           var(--p-lav-600);   /* 5.0:1 ring */

  /* ── Typography ──────────────────────────────────────────────────────── */
  --font-display: 'Quicksand', ui-rounded, 'SF Pro Rounded', system-ui, sans-serif;
  --font-body:    'Nunito', ui-rounded, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    ui-monospace, 'SF Mono', 'Cascadia Mono', Menlo, Consolas, monospace;

  /* 1.25 modular scale on 16px; display sizes are fluid */
  --text-xs:   0.75rem;    /* 12 — chips, meta */
  --text-sm:   0.875rem;   /* 14 — secondary */
  --text-md:   1rem;       /* 16 — body */
  --text-lg:   1.125rem;   /* 18 — lead */
  --text-xl:   1.25rem;    /* 20 — h4 / card title */
  --text-2xl:  1.5625rem;  /* 25 — h3 */
  --text-3xl:  clamp(1.625rem, 1.3rem + 1.4vw, 1.953rem);  /* h2 */
  --text-4xl:  clamp(2rem,     1.4rem + 2.6vw, 3.052rem);  /* h1 / hero */

  --weight-regular: 400;
  --weight-semibold: 600;
  --weight-bold: 700;

  --leading-tight: 1.15;   /* display */
  --leading-snug:  1.35;   /* headings, UI */
  --leading-body:  1.6;    /* paragraphs */

  --tracking-display: -0.01em;
  --tracking-caps:     0.06em;

  --measure: 65ch;

  /* ── Spacing (4px base) ──────────────────────────────────────────────── */
  --space-0:  0;
  --space-1:  0.25rem;  /*  4 */
  --space-2:  0.5rem;   /*  8 */
  --space-3:  0.75rem;  /* 12 */
  --space-4:  1rem;     /* 16 */
  --space-5:  1.25rem;  /* 20 */
  --space-6:  1.5rem;   /* 24 */
  --space-8:  2rem;     /* 32 */
  --space-10: 2.5rem;   /* 40 */
  --space-12: 3rem;     /* 48 */
  --space-16: 4rem;     /* 64 */
  --space-20: 5rem;     /* 80 */
  --space-24: 6rem;     /* 96 */

  --gutter:        var(--space-4);                         /* page edge on phones */
  --section-gap:   clamp(var(--space-12), 6vw, var(--space-20));
  --container:     72rem;
  --container-narrow: 44rem;

  /* ── Shape ───────────────────────────────────────────────────────────── */
  --radius-xs:   0.375rem; /*  6 — inputs inside cards, tags */
  --radius-sm:   0.625rem; /* 10 — small buttons */
  --radius-md:   1rem;     /* 16 — inputs, list rows */
  --radius-lg:   1.5rem;   /* 24 — cards (v7 --radius) */
  --radius-xl:   2rem;     /* 32 — hero panels, modals */
  --radius-pill: 999px;

  --border-thin:  1px;
  --border-thick: 2px;

  /* ── Elevation (pink-tinted in light, plain in dark) ─────────────────── */
  --shadow-1: 0 1px 2px rgb(58 46 69 / .06), 0 1px 1px rgb(255 111 165 / .04);
  --shadow-2: 0 2px 6px rgb(58 46 69 / .06), 0 6px 20px rgb(255 111 165 / .10);
  --shadow-3: 0 4px 12px rgb(58 46 69 / .08), 0 16px 40px rgb(255 111 165 / .14);
  --shadow-focus: 0 0 0 3px var(--color-bg), 0 0 0 5px var(--color-focus);

  /* ── Avatar ring (kept from v7 .avatar-ring; same in both themes) ───── */
  --gradient-avatar-ring: conic-gradient(from 210deg, #f9ce34, #ee2a7b, #6228d7, #f9ce34);
  --avatar-ring-width: 5px;

  /* ── Motion ──────────────────────────────────────────────────────────── */
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 320ms;
  --ease-out:    cubic-bezier(.2, .8, .2, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);  /* buttons, chips only */

  /* ── Layers ──────────────────────────────────────────────────────────── */
  --z-sticky:  10;
  --z-dropdown: 20;
  --z-overlay: 40;
  --z-modal:   50;
  --z-toast:   60;

  /* ── Sizes ───────────────────────────────────────────────────────────── */
  --control-sm: 2rem;      /* 32 */
  --control-md: 2.75rem;   /* 44 — minimum touch target */
  --control-lg: 3.25rem;   /* 52 — hero CTA */
  --avatar-sm: 2rem;
  --avatar-md: 3rem;
  --avatar-lg: 5rem;

  color-scheme: light;
}

/* ── Dark theme: follows OS unless data-theme is set; forced dark repeats the same values ── */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --color-bg:              var(--p-d-0);
    --color-surface:         var(--p-d-100);
    --color-surface-sunken:  var(--p-d-50);
    --color-surface-raised:  var(--p-d-200);
    --color-overlay:         rgb(0 0 0 / .6);
    --color-text:            var(--p-d-900);   /* 15.9:1 */
    --color-text-muted:      var(--p-d-600);   /*  7.3:1 on surface */
    --color-text-inverse:    var(--p-d-0);
    --color-border:          var(--p-d-300);
    --color-border-strong:   var(--p-d-400);   /*  3.9:1 */
    --color-link:            var(--p-lav-300);
    --color-link-hover:      var(--p-lav-100);
    --color-money:           var(--p-pink-400);
    --color-on-money:        var(--p-d-0);     /*  7.0:1 */
    --color-money-strong:    var(--p-pink-400);
    --color-money-text:      var(--p-pink-300);
    --color-money-subtle:    rgb(255 111 165 / .14);
    --color-info:            var(--p-lav-300);
    --color-on-info:         var(--p-d-0);
    --color-info-text:       var(--p-lav-300);
    --color-info-subtle:     rgb(182 156 255 / .14);
    --color-progress:        var(--p-mint-400);
    --color-on-progress:     var(--p-mint-800);
    --color-progress-text:   var(--p-mint-400);
    --color-progress-subtle: rgb(127 231 196 / .14);
    --color-progress-track:  var(--p-d-300);
    --color-warning-text:    var(--p-amber-400);
    --color-warning-subtle:  rgb(255 200 87 / .14);
    --color-on-warning-subtle: var(--p-amber-400);
    --color-danger-text:     var(--p-red-300);
    --color-danger-subtle:   rgb(255 138 153 / .14);
    --color-focus:           var(--p-lav-300);
    --shadow-1: 0 1px 2px rgb(0 0 0 / .4);
    --shadow-2: 0 4px 16px rgb(0 0 0 / .45);
    --shadow-3: 0 12px 36px rgb(0 0 0 / .55);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --color-bg:              var(--p-d-0);
  --color-surface:         var(--p-d-100);
  --color-surface-sunken:  var(--p-d-50);
  --color-surface-raised:  var(--p-d-200);
  --color-overlay:         rgb(0 0 0 / .6);
  --color-text:            var(--p-d-900);
  --color-text-muted:      var(--p-d-600);
  --color-text-inverse:    var(--p-d-0);
  --color-border:          var(--p-d-300);
  --color-border-strong:   var(--p-d-400);
  --color-link:            var(--p-lav-300);
  --color-link-hover:      var(--p-lav-100);
  --color-money:           var(--p-pink-400);
  --color-on-money:        var(--p-d-0);
  --color-money-strong:    var(--p-pink-400);
  --color-money-text:      var(--p-pink-300);
  --color-money-subtle:    rgb(255 111 165 / .14);
  --color-info:            var(--p-lav-300);
  --color-on-info:         var(--p-d-0);
  --color-info-text:       var(--p-lav-300);
  --color-info-subtle:     rgb(182 156 255 / .14);
  --color-progress:        var(--p-mint-400);
  --color-on-progress:     var(--p-mint-800);
  --color-progress-text:   var(--p-mint-400);
  --color-progress-subtle: rgb(127 231 196 / .14);
  --color-progress-track:  var(--p-d-300);
  --color-warning-text:    var(--p-amber-400);
  --color-warning-subtle:  rgb(255 200 87 / .14);
  --color-on-warning-subtle: var(--p-amber-400);
  --color-danger-text:     var(--p-red-300);
  --color-danger-subtle:   rgb(255 138 153 / .14);
  --color-focus:           var(--p-lav-300);
  --shadow-1: 0 1px 2px rgb(0 0 0 / .4);
  --shadow-2: 0 4px 16px rgb(0 0 0 / .45);
  --shadow-3: 0 12px 36px rgb(0 0 0 / .55);
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0ms; --dur-base: 0ms; --dur-slow: 0ms; --ease-spring: linear; }
}

/* ── App extensions ─────────────────────────────────────────────────────
 * Added when tokens.css was promoted to the live stylesheet. Keep this list
 * short: anything a single component needs belongs in that component, not here.
 * Run `python -m scripts.sync_tokens` after editing this file. */
:root {
  --header-h: 4rem;
  --radius-card: var(--radius-md);   /* creator / pot cards — distinct from pill controls */
  --radius-panel: var(--radius-lg);  /* page sections, hero, forms */
  --shadow-header: 0 1px 0 var(--color-border), 0 8px 24px rgb(58 46 69 / .06);
  --shadow-card-hover: var(--shadow-3);
  --focus-ring: 0 0 0 3px var(--color-bg), 0 0 0 6px var(--color-focus);
  --vault-surface: #17131F;
  --vault-text: #F3EDF7;
  --vault-muted: #B3A8C2;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --shadow-header: 0 1px 0 var(--color-border);
  }
}