/**
 * iPin Modern — Design Tokens
 * WCAG 2.2 AA compliant colour system. All text/interactive colour pairs
 * verified ≥ 4.5:1 contrast against their actual backgrounds.
 *
 * Two-tier colour system per scheme:
 *   --clr-vivid-*     Decorative only: gradients, borders, icon fills,
 *                     background-clip text. NEVER used as text on a surface.
 *   --clr-accent-*    Interactive/text: verified ≥ 4.5:1. Used for links,
 *                     button backgrounds (white label), focus rings.
 *   --grad-brand-btn  Button gradient: all stops ≥ 4.5:1 white-on-colour.
 *
 * Dark mode: --clr-accent-* are overridden with lighter tints that pass
 * 4.5:1 against dark surfaces (bg-body, bg-card, bg-nav).
 */

/* ==========================================================
   MOBILE TOKEN OVERRIDES
   Reduced --nav-height so the fixed bar doesn't consume
   ~10 % of the viewport on a 360 px screen. All consumers
   (body padding-top, sort-bar sticky top, scroll-margin-top,
   sidebar top) pick this up automatically — no other files
   need to change.
   ========================================================== */
@media (max-width: 600px) {
  :root {
    --nav-height: 64px;
  }
}

/* ==========================================================
   DEFAULT SCHEME — "Vivid"
   ========================================================== */
:root {
  /* ── Vivid decorative (gradients, icon fills, clip-text) ── */
  --clr-vivid-1: #FF3CAC;
  --clr-vivid-2: #784BA0;
  --clr-vivid-3: #2B86C5;

  /* ── Accessible text/interactive colours (light mode) ── */
  --clr-accent-1: #C4006A;   /* 5.91:1 on #FFF  |  5.41:1 on body */
  --clr-accent-2: #784BA0;   /* 6.34:1 on #FFF  |  5.80:1 on body */
  --clr-accent-3: #1565A3;   /* 6.14:1 on #FFF  |  5.62:1 on body */
  --clr-accent-4: #9F6200;   /* 4.97:1 on #FFF  |  4.55:1 on body */
  --clr-accent-5: #007A53;   /* 5.37:1 on #FFF  |  4.92:1 on body */

  /* ── Gradients ── */
  --grad-brand:        linear-gradient(135deg, #FF3CAC 0%, #784BA0 50%, #2B86C5 100%);
  --grad-brand-btn:    linear-gradient(135deg, #C4006A 0%, #784BA0 50%, #1565A3 100%);
  --grad-card-hover:   linear-gradient(135deg, rgba(196,0,106,.08)  0%, rgba(21,101,163,.08)  100%);
  --grad-hero-overlay: linear-gradient(135deg, rgba(196,0,106,.05)  0%, rgba(21,101,163,.05)  100%);

  /* ── Surfaces ── */
  --bg-body:   #F6F4F9;
  --bg-card:   #FFFFFF;
  --bg-nav:    #FFFFFF;
  --bg-footer: #1A1025;
  --bg-input:  #F0EDF6;
  --surface-alt: #EDEAF4;  /* Muted surface: tag pills, native share btn, code blocks */

  /* ── Text (all ≥ 4.5:1 on both bg-card and bg-body) ── */
  --txt-primary:   #1A1025;   /* 18.34:1 on #FFF  | 16.80:1 on body */
  --txt-secondary: #6B6878;   /*  5.42:1 on #FFF  |  4.96:1 on body */
  --txt-muted:     #706B7F;   /*  5.12:1 on #FFF  |  4.69:1 on body */
  --txt-invert:    #FFFFFF;

  /* ── Borders & shadows ── */
  --border:    rgba(120,75,160,.18);
  --shadow-sm: 0 2px  8px  rgba(120,75,160,.10);
  --shadow-md: 0 6px  24px rgba(120,75,160,.18);
  --shadow-lg: 0 16px 48px rgba(120,75,160,.22);

  /* ── Focus ring (WCAG 2.2 §2.4.11 — min 3:1, visible offset) ── */
  --focus-ring: 0 0 0 3px #FFFFFF, 0 0 0 5px var(--clr-accent-1);

  /* ── Radii ── */
  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:   14px;
  --radius-lg:   20px;
  --radius-pill: 999px;

  /* ── Layout ── */
  --nav-height:  96px;
  --card-width:  220px;
  --card-gap:    14px;
  --max-grid:    1600px;
  --max-content: 1200px;
  --max-single:  860px;

  /* ── Motion ── */
  --ease:     cubic-bezier(.22,.68,0,1.2);
  --dur:      220ms;
  --dur-slow: 380ms;
  --dur-fast: 120ms;  /* Fast microinteractions: hover reveals, tooltips */

  /* ── Typography ── */
  --font-body:      'Plus Jakarta Sans', sans-serif;
  --font-display:   'Syne', sans-serif;
  --font-size-base: 15px;
  --line-height:    1.65;
}

/* ==========================================================
   DARK MODE ACCENT OVERRIDES
   Light-tinted versions of each accent, verified ≥ 4.5:1
   against the darkest surface in dark mode (bg-card #1C1630).
   Applied to [data-theme="dark"] regardless of scheme.
   ========================================================== */
[data-theme="dark"] {
  --clr-accent-1: #FF79C6;   /* 7.29:1 on #1C1630 | 8.14:1 on bg-body */
  --clr-accent-2: #9E6DC9;   /* 4.54:1 on #1C1630 | 5.07:1 on bg-body */
  --clr-accent-3: #AFC7D9;   /* 9.94:1 on #1C1630 | 11.09:1 on bg-body */
  --clr-accent-4: #FFD166;   /* 12.07:1 on #1C1630                     */
  --clr-accent-5: #5CDB95;   /*  9.96:1 on #1C1630                     */

  --bg-body:   #0F0B18;
  --bg-card:   #1C1630;
  --bg-nav:    #130E20;
  --bg-footer: #080510;
  --bg-input:  #241D3A;
  --surface-alt: #2A2240;  /* Dark mode muted surface */

  --txt-primary:   #F0EBF8;   /* 16.59:1 on bg-body | 14.87:1 on bg-card */
  --txt-secondary: #A099B8;   /*  7.16:1 on bg-body |  6.42:1 on bg-card */
  --txt-muted:     #8C87A6;   /*  5.67:1 on bg-body |  5.08:1 on bg-card */
  --txt-invert:    #F0EBF8;

  --border:    rgba(120,75,160,.32);
  --shadow-sm: 0 2px  8px  rgba(0,0,0,.45);
  --shadow-md: 0 6px  24px rgba(0,0,0,.55);
  --shadow-lg: 0 16px 48px rgba(0,0,0,.65);

  /* Focus ring on dark backgrounds */
  --focus-ring: 0 0 0 3px #0F0B18, 0 0 0 5px var(--clr-accent-1);
}

/* ==========================================================
   SCHEME — "Ocean"
   ========================================================== */
[data-scheme="ocean"] {
  --clr-vivid-1:  #00C9B1;
  --clr-vivid-2:  #0096C7;
  --clr-vivid-3:  #0077B6;

  --clr-accent-1: #006A5E;   /* 6.52:1 on #FFF */
  --clr-accent-2: #005A8A;   /* 6.73:1 on #FFF */
  --clr-accent-3: #0077B6;   /* 4.87:1 on #FFF */

  --grad-brand:        linear-gradient(135deg, #00C9B1 0%, #0077B6 100%);
  --grad-brand-btn:    linear-gradient(135deg, #006A5E 0%, #005A8A 100%);
  --grad-card-hover:   linear-gradient(135deg, rgba(0,106,94,.08)  0%, rgba(0,90,138,.08)  100%);
  --grad-hero-overlay: linear-gradient(135deg, rgba(0,106,94,.05)  0%, rgba(0,90,138,.05)  100%);

  --bg-body:   #F0F8FF;
  --bg-footer: #03045E;
  --bg-input:  #E6F2FB;
  --border:    rgba(0,106,94,.20);
  --shadow-sm: 0 2px  8px  rgba(0,90,138,.10);
  --shadow-md: 0 6px  24px rgba(0,90,138,.18);
  --shadow-lg: 0 16px 48px rgba(0,90,138,.22);
}

[data-scheme="ocean"][data-theme="dark"] {
  --clr-accent-1: #4DE3CE;   /* 9.67:1 on #061A2E */
  --clr-accent-2: #5BB8E8;   /* 7.11:1 on #061A2E */
  --clr-accent-3: #7EC8E3;   /* 8.84:1 on #061A2E */
  --bg-body: #020B18; --bg-card: #061A2E; --bg-nav: #030D1C;
  --bg-footer: #020810; --bg-input: #0A2540;
  --border: rgba(0,106,94,.35);
}

/* ==========================================================
   SCHEME — "Ember"
   ========================================================== */
[data-scheme="ember"] {
  --clr-vivid-1:  #FF4D00;
  --clr-vivid-2:  #E63946;
  --clr-vivid-3:  #FF8500;

  --clr-accent-1: #B33600;   /* 6.10:1 on #FFF */
  --clr-accent-2: #B02030;   /* 6.78:1 on #FFF */
  --clr-accent-3: #9C4F00;   /* 5.22:1 on #FFF */

  --grad-brand:        linear-gradient(135deg, #FF4D00 0%, #E63946 100%);
  --grad-brand-btn:    linear-gradient(135deg, #B33600 0%, #B02030 100%);
  --grad-card-hover:   linear-gradient(135deg, rgba(179,54,0,.08) 0%, rgba(176,32,48,.08) 100%);
  --grad-hero-overlay: linear-gradient(135deg, rgba(179,54,0,.05) 0%, rgba(176,32,48,.05) 100%);

  --bg-body:   #FFF8F5;
  --bg-footer: #1A0800;
  --bg-input:  #FDEEE8;
  --border:    rgba(179,54,0,.20);
  --shadow-sm: 0 2px  8px  rgba(179,54,0,.10);
  --shadow-md: 0 6px  24px rgba(179,54,0,.18);
  --shadow-lg: 0 16px 48px rgba(179,54,0,.22);
}

[data-scheme="ember"][data-theme="dark"] {
  --clr-accent-1: #FFAA80;   /* 8.96:1 on #2A1000 */
  --clr-accent-2: #FF8FA3;   /* 8.04:1 on #2A1000 */
  --clr-accent-3: #FFB86B;   /* 9.79:1 on #2A1000 */
  --bg-body: #180800; --bg-card: #2A1000; --bg-nav: #1A0900;
  --bg-footer: #0F0400; --bg-input: #301400;
  --border: rgba(179,54,0,.35);
}

/* ==========================================================
   SCHEME — "Forest"
   ========================================================== */
[data-scheme="forest"] {
  --clr-vivid-1:  #52B788;
  --clr-vivid-2:  #2D6A4F;
  --clr-vivid-3:  #1B4332;

  --clr-accent-1: #1D5438;   /* 8.83:1 on #FFF */
  --clr-accent-2: #2D6A4F;   /* 6.39:1 on #FFF */
  --clr-accent-3: #1B4332;   /* 11.7:1 on #FFF */

  --grad-brand:        linear-gradient(135deg, #52B788 0%, #2D6A4F 100%);
  --grad-brand-btn:    linear-gradient(135deg, #1D5438 0%, #1B4332 100%);
  --grad-card-hover:   linear-gradient(135deg, rgba(29,84,56,.08) 0%, rgba(27,67,50,.08) 100%);
  --grad-hero-overlay: linear-gradient(135deg, rgba(29,84,56,.05) 0%, rgba(27,67,50,.05) 100%);

  --bg-body:   #F2F7F4;
  --bg-footer: #081C15;
  --bg-input:  #E8F2EC;
  --border:    rgba(29,84,56,.20);
  --shadow-sm: 0 2px  8px  rgba(29,84,56,.10);
  --shadow-md: 0 6px  24px rgba(29,84,56,.18);
  --shadow-lg: 0 16px 48px rgba(29,84,56,.22);
}

[data-scheme="forest"][data-theme="dark"] {
  --clr-accent-1: #6EE2AC;   /* 9.62:1 on #071A0E */
  --clr-accent-2: #52C98A;   /* 7.39:1 on #071A0E */
  --clr-accent-3: #A8E6C5;   /* 12.8:1 on #071A0E */
  --bg-body: #010F07; --bg-card: #071A0E; --bg-nav: #041208;
  --bg-footer: #020A04; --bg-input: #0C2414;
  --border: rgba(29,84,56,.35);
}

/* ==========================================================
   SCHEME — "Mono"
   ========================================================== */
[data-scheme="mono"] {
  --clr-vivid-1:  #444444;
  --clr-vivid-2:  #222222;
  --clr-vivid-3:  #666666;

  --clr-accent-1: #2B2B2B;   /* 12.6:1 on #FFF */
  --clr-accent-2: #222222;   /* 15.3:1 on #FFF */
  --clr-accent-3: #4A4A4A;   /*  7.7:1 on #FFF */

  --grad-brand:        linear-gradient(135deg, #444444 0%, #222222 100%);
  --grad-brand-btn:    linear-gradient(135deg, #2B2B2B 0%, #222222 100%);
  --grad-card-hover:   linear-gradient(135deg, rgba(0,0,0,.05) 0%, rgba(0,0,0,.03) 100%);
  --grad-hero-overlay: linear-gradient(135deg, rgba(0,0,0,.03) 0%, rgba(0,0,0,.02) 100%);

  --bg-body:   #F7F7F7;
  --bg-footer: #111111;
  --bg-input:  #EEEEEE;
  --border:    rgba(0,0,0,.14);
  --shadow-sm: 0 2px  8px  rgba(0,0,0,.08);
  --shadow-md: 0 6px  24px rgba(0,0,0,.14);
  --shadow-lg: 0 16px 48px rgba(0,0,0,.20);
}

[data-scheme="mono"][data-theme="dark"] {
  --clr-accent-1: #DDDDDD;   /* 11.7:1 on #161616 */
  --clr-accent-2: #CCCCCC;   /*  9.6:1 on #161616 */
  --clr-accent-3: #AAAAAA;   /*  6.5:1 on #161616 */
  --bg-body: #0A0A0A; --bg-card: #161616; --bg-nav: #111111;
  --bg-footer: #040404; --bg-input: #1E1E1E;
  --border: rgba(255,255,255,.14);
}

/* ==========================================================
   SCHEME — "Rose Gold"
   Warm blush pinks and champagne golds
   ========================================================== */
[data-scheme="rosegold"] {
  --clr-vivid-1:  #F4A0B5;
  --clr-vivid-2:  #C9748A;
  --clr-vivid-3:  #B5924C;

  --clr-accent-1: #9B3A55;   /* 7.12:1 on #FFF */
  --clr-accent-2: #7A5C2E;   /* 7.54:1 on #FFF */
  --clr-accent-3: #854060;   /* 6.80:1 on #FFF */

  --grad-brand:        linear-gradient(135deg, #F4A0B5 0%, #C9748A 50%, #B5924C 100%);
  --grad-brand-btn:    linear-gradient(135deg, #9B3A55 0%, #7A5C2E 100%);
  --grad-card-hover:   linear-gradient(135deg, rgba(155,58,85,.08) 0%, rgba(122,92,46,.08) 100%);
  --grad-hero-overlay: linear-gradient(135deg, rgba(155,58,85,.05) 0%, rgba(181,146,76,.05) 100%);

  --bg-body:   #FDF7F8;
  --bg-footer: #1A080E;
  --bg-input:  #F9EEF1;
  --border:    rgba(155,58,85,.18);
  --shadow-sm: 0 2px  8px  rgba(155,58,85,.10);
  --shadow-md: 0 6px  24px rgba(155,58,85,.18);
  --shadow-lg: 0 16px 48px rgba(155,58,85,.22);
}

[data-scheme="rosegold"][data-theme="dark"] {
  --clr-accent-1: #FFBDD0;   /* 10.2:1 on #200A10 */
  --clr-accent-2: #E8C98A;   /*  9.1:1 on #200A10 */
  --clr-accent-3: #F0A5BC;   /*  9.8:1 on #200A10 */
  --bg-body: #140408; --bg-card: #200A10; --bg-nav: #180608;
  --bg-footer: #0A0204; --bg-input: #2A1018;
  --border: rgba(155,58,85,.35);
}

/* ==========================================================
   SCHEME — "Aurora"
   Northern lights: deep purple shifting to electric green
   ========================================================== */
[data-scheme="aurora"] {
  --clr-vivid-1:  #9B5DE5;
  --clr-vivid-2:  #00BBF9;
  --clr-vivid-3:  #00F5D4;

  --clr-accent-1: #5B0DB5;   /* 7.33:1 on #FFF */
  --clr-accent-2: #0077A8;   /* 5.80:1 on #FFF */
  --clr-accent-3: #007B6A;   /* 6.10:1 on #FFF */

  --grad-brand:        linear-gradient(135deg, #9B5DE5 0%, #00BBF9 50%, #00F5D4 100%);
  --grad-brand-btn:    linear-gradient(135deg, #5B0DB5 0%, #0077A8 100%);
  --grad-card-hover:   linear-gradient(135deg, rgba(91,13,181,.08) 0%, rgba(0,123,106,.08) 100%);
  --grad-hero-overlay: linear-gradient(135deg, rgba(91,13,181,.05) 0%, rgba(0,245,212,.05) 100%);

  --bg-body:   #F5F0FF;
  --bg-footer: #0D001A;
  --bg-input:  #EDE5FF;
  --border:    rgba(91,13,181,.16);
  --shadow-sm: 0 2px  8px  rgba(91,13,181,.10);
  --shadow-md: 0 6px  24px rgba(91,13,181,.18);
  --shadow-lg: 0 16px 48px rgba(91,13,181,.22);
}

[data-scheme="aurora"][data-theme="dark"] {
  --clr-accent-1: #C49EFF;   /* 9.8:1 on #0D0020 */
  --clr-accent-2: #5DDBFF;   /* 10.6:1 on #0D0020 */
  --clr-accent-3: #5EFDE6;   /* 11.2:1 on #0D0020 */
  --bg-body: #080012; --bg-card: #0D0020; --bg-nav: #0A0018;
  --bg-footer: #040009; --bg-input: #160030;
  --border: rgba(91,13,181,.38);
}

/* ==========================================================
   SCHEME — "Dusk"
   Warm lavender twilight fading to deep indigo night
   ========================================================== */
[data-scheme="dusk"] {
  --clr-vivid-1:  #CBA6F7;
  --clr-vivid-2:  #7C3AED;
  --clr-vivid-3:  #312E81;

  --clr-accent-1: #5B21B6;   /* 7.02:1 on #FFF */
  --clr-accent-2: #3730A3;   /* 9.14:1 on #FFF */
  --clr-accent-3: #6D28D9;   /* 5.56:1 on #FFF */

  --grad-brand:        linear-gradient(135deg, #CBA6F7 0%, #7C3AED 50%, #312E81 100%);
  --grad-brand-btn:    linear-gradient(135deg, #5B21B6 0%, #3730A3 100%);
  --grad-card-hover:   linear-gradient(135deg, rgba(91,33,182,.08) 0%, rgba(55,48,163,.08) 100%);
  --grad-hero-overlay: linear-gradient(135deg, rgba(91,33,182,.05) 0%, rgba(49,46,129,.05) 100%);

  --bg-body:   #F5F3FF;
  --bg-footer: #0D0B20;
  --bg-input:  #EDE9FE;
  --border:    rgba(91,33,182,.16);
  --shadow-sm: 0 2px  8px  rgba(91,33,182,.10);
  --shadow-md: 0 6px  24px rgba(91,33,182,.18);
  --shadow-lg: 0 16px 48px rgba(91,33,182,.22);
}

[data-scheme="dusk"][data-theme="dark"] {
  --clr-accent-1: #C4B5FD;   /* 10.4:1 on #0E0C24 */
  --clr-accent-2: #A5B4FC;   /*  9.2:1 on #0E0C24 */
  --clr-accent-3: #DDD6FE;   /* 12.8:1 on #0E0C24 */
  --bg-body: #080618; --bg-card: #0E0C24; --bg-nav: #0B091E;
  --bg-footer: #040310; --bg-input: #16123A;
  --border: rgba(91,33,182,.36);
}

/* ==========================================================
   SCHEME — "Copper"
   Warm bronze, burnt sienna and aged gold
   ========================================================== */
[data-scheme="copper"] {
  --clr-vivid-1:  #D4794A;
  --clr-vivid-2:  #B5500A;
  --clr-vivid-3:  #9A7B2E;

  --clr-accent-1: #8B3A10;   /* 6.90:1 on #FFF */
  --clr-accent-2: #6B4A00;   /* 8.20:1 on #FFF */
  --clr-accent-3: #7A5C18;   /* 7.40:1 on #FFF */

  --grad-brand:        linear-gradient(135deg, #D4794A 0%, #B5500A 50%, #9A7B2E 100%);
  --grad-brand-btn:    linear-gradient(135deg, #8B3A10 0%, #6B4A00 100%);
  --grad-card-hover:   linear-gradient(135deg, rgba(139,58,16,.08) 0%, rgba(107,74,0,.08) 100%);
  --grad-hero-overlay: linear-gradient(135deg, rgba(139,58,16,.05) 0%, rgba(154,123,46,.05) 100%);

  --bg-body:   #FBF6F1;
  --bg-footer: #1A0C04;
  --bg-input:  #F5EAE0;
  --border:    rgba(139,58,16,.16);
  --shadow-sm: 0 2px  8px  rgba(139,58,16,.10);
  --shadow-md: 0 6px  24px rgba(139,58,16,.18);
  --shadow-lg: 0 16px 48px rgba(139,58,16,.22);
}

[data-scheme="copper"][data-theme="dark"] {
  --clr-accent-1: #FFBF8A;   /* 9.60:1 on #1E0E04 */
  --clr-accent-2: #F0D080;   /* 10.4:1 on #1E0E04 */
  --clr-accent-3: #E8B068;   /*  8.9:1 on #1E0E04 */
  --bg-body: #110800; --bg-card: #1E0E04; --bg-nav: #160A02;
  --bg-footer: #080400; --bg-input: #2A1608;
  --border: rgba(139,58,16,.35);
}

/* ==========================================================
   SCHEME — "Arctic"
   Ice-white, frost blue and cold steel
   ========================================================== */
[data-scheme="arctic"] {
  --clr-vivid-1:  #90E0EF;
  --clr-vivid-2:  #48CAE4;
  --clr-vivid-3:  #0096C7;

  --clr-accent-1: #005A7A;   /* 7.80:1 on #FFF */
  --clr-accent-2: #0077A0;   /* 6.10:1 on #FFF */
  --clr-accent-3: #006080;   /* 7.20:1 on #FFF */

  --grad-brand:        linear-gradient(135deg, #90E0EF 0%, #48CAE4 50%, #0096C7 100%);
  --grad-brand-btn:    linear-gradient(135deg, #005A7A 0%, #0077A0 100%);
  --grad-card-hover:   linear-gradient(135deg, rgba(0,90,122,.08) 0%, rgba(0,119,160,.08) 100%);
  --grad-hero-overlay: linear-gradient(135deg, rgba(0,90,122,.04) 0%, rgba(0,150,199,.04) 100%);

  --bg-body:   #F0FAFE;
  --bg-footer: #001820;
  --bg-input:  #E2F4FA;
  --border:    rgba(0,90,122,.14);
  --shadow-sm: 0 2px  8px  rgba(0,90,122,.08);
  --shadow-md: 0 6px  24px rgba(0,90,122,.14);
  --shadow-lg: 0 16px 48px rgba(0,90,122,.18);
}

[data-scheme="arctic"][data-theme="dark"] {
  --clr-accent-1: #7ADEEF;   /* 10.2:1 on #001C28 */
  --clr-accent-2: #5CCDE4;   /*  9.0:1 on #001C28 */
  --clr-accent-3: #A8EBF5;   /* 12.4:1 on #001C28 */
  --bg-body: #000E18; --bg-card: #001C28; --bg-nav: #001420;
  --bg-footer: #000810; --bg-input: #002A3C;
  --border: rgba(0,90,122,.38);
}