/* ===========================================================================
   KINDRED — DESIGN TOKENS
   ---------------------------------------------------------------------------
   The only file that defines raw values. Everything in app.css (and every
   page) must consume these variables — never hard-coded colours or sizes.

   PALETTE CONCEPT — "Paper & Ember"
   Warm ivory paper, warm brown-black ink, a confident terracotta/ember accent,
   and a muted moss green. Editorial and human — a craft magazine, a darkroom,
   a climbing gym chalk bag. Deliberately NOT startup purple-blue, and
   deliberately NOT dating-app pink/red.

   CONTENTS
     1. Neutral ramp (sand)      6. Semantic surface / text / border
     2. Accent ramp (ember)      7. Gradients + avatar gradients
     3. Support ramps            8. Typography
     4. Semantic status          9. Space / radii / shadow / motion / z
     5. Alpha + glass           10. Dark theme (media query + [data-theme])
   =========================================================================== */

:root {
  color-scheme: light dark;

  /* ---------------------------------------------------------------------
     1. NEUTRAL RAMP — Instagram greys. Name kept as "sand" so the ~40
        downstream consumers keep resolving; the values are now neutral.
     --------------------------------------------------------------------- */
  --sand-0:   #ffffff;
  --sand-50:  #fafafa;
  --sand-100: #f5f5f5;
  --sand-150: #efefef;
  --sand-200: #e6e6e6;
  --sand-300: #dbdbdb;
  --sand-400: #c7c7c7;
  --sand-500: #a8a8a8;
  --sand-600: #8e8e8e;
  --sand-700: #737373;
  --sand-800: #4b4b4b;
  --sand-900: #262626;
  --sand-950: #121212;
  --sand-1000:#000000;

  /* ---------------------------------------------------------------------
     2. ACCENT RAMP — Instagram magenta/purple. Name kept as "ember".
     --------------------------------------------------------------------- */
  --ember-50:  #fdf2f8;
  --ember-100: #fce7f3;
  --ember-200: #f5d0e4;
  --ember-300: #eda9cd;
  --ember-400: #dd6fae;
  --ember-500: #c13584;   /* primary accent (light mode) */
  --ember-600: #a82d73;
  --ember-700: #911f61;
  --ember-800: #7a1f52;
  --ember-900: #5c1740;

  /* ---------------------------------------------------------------------
     3. SUPPORT RAMPS — moss (success), honey (warn, IG amber),
        clay (danger, IG red), slate (cool contrast).
     --------------------------------------------------------------------- */
  --moss-50:  #f0f5f0;
  --moss-100: #dcebe0;
  --moss-200: #bcd9c4;
  --moss-300: #93bd9f;
  --moss-400: #6aa079;
  --moss-500: #4b8459;
  --moss-600: #3a6b46;
  --moss-700: #2d5437;
  --moss-800: #22412b;

  /* Was an amber ramp. Warn is the only consumer, and an amber chip was the
     last warm thing left on screen, so this now runs down the Instagram
     purple (#833ab4) instead. Names kept so nothing downstream has to move. */
  --honey-50:  #f8f0fc;
  --honey-100: #f0e0f8;
  --honey-200: #e0c7f0;
  --honey-300: #c79ce0;
  --honey-400: #a86dcc;
  --honey-500: #833ab4;
  --honey-600: #6d2f96;
  --honey-700: #5b2280;

  --clay-100: #ffe8e8;
  --clay-300: #ff9c9c;
  --clay-500: #fd1d1d;
  --clay-600: #d81212;
  --clay-700: #a80f0f;

  --slate-300: #9db2c6;
  --slate-500: #4a6b8a;
  --slate-600: #375a75;
  --slate-700: #2a4557;

  /* ---------------------------------------------------------------------
     4. SEMANTIC STATUS
     --------------------------------------------------------------------- */
  --color-success:      var(--moss-600);
  --color-success-bg:   var(--moss-50);
  --color-success-text: var(--moss-800);
  --color-success-border: var(--moss-200);

  --color-warn:         var(--honey-500);
  --color-warn-bg:      var(--honey-50);
  --color-warn-text:    var(--honey-700);
  --color-warn-border:  var(--honey-200);

  --color-danger:       var(--clay-500);
  --color-danger-bg:    var(--clay-100);
  --color-danger-text:  var(--clay-700);
  --color-danger-border:var(--clay-300);

  --color-info:         var(--slate-600);
  --color-info-bg:      #eef3f8;
  --color-info-text:    var(--slate-700);
  --color-info-border:  var(--slate-300);

  /* ---------------------------------------------------------------------
     5. RGB CHANNELS (for rgb()/alpha composition) + GLASS
     --------------------------------------------------------------------- */
  --rgb-accent:  193 53 132;
  --rgb-ink:     38 38 38;
  --rgb-paper:   255 255 255;
  --rgb-moss:    58 107 70;
  --rgb-honey:   247 119 55;

  --glass-bg:      rgb(255 255 255 / 0.72);
  --glass-bg-solid: rgb(255 255 255 / 0.94);
  --glass-border:  rgb(var(--rgb-ink) / 0.08);
  --glass-blur:    saturate(180%) blur(20px);

  --scrim:         rgb(var(--rgb-ink) / 0.42);
  --overlay-veil:  rgb(var(--rgb-ink) / 0.06);

  /* ---------------------------------------------------------------------
     6. SEMANTIC SURFACE / TEXT / BORDER  (light theme values)
     --------------------------------------------------------------------- */
  --bg:              #ffffff;   /* page canvas — Instagram white */
  --bg-subtle:       #f2ece3;   /* alternating band                        */
  --bg-inverse:      var(--sand-950);

  --surface:         #ffffff;   /* card                                    */
  --surface-2:       var(--sand-50);
  --surface-3:       var(--sand-100);
  --surface-sunken:  var(--sand-150);
  --surface-inverse: var(--sand-900);

  --border:          rgb(var(--rgb-ink) / 0.09);
  --border-strong:   rgb(var(--rgb-ink) / 0.16);
  --border-subtle:   rgb(var(--rgb-ink) / 0.055);
  --border-accent:   rgb(var(--rgb-accent) / 0.35);

  --text:            #262626;   /* Instagram ink                           */
  --text-secondary:  #4b4b4b;
  --text-muted:      #737373;
  --text-subtle:     #8e8e8e;
  --text-inverse:    #fafafa;
  --text-on-accent:  #ffffff;
  --text-link:       var(--ember-600);

  --accent:          var(--ember-500);
  --accent-hover:    var(--ember-600);
  --accent-press:    var(--ember-700);
  --accent-soft:     var(--ember-50);
  --accent-soft-2:   var(--ember-100);
  --accent-text:     var(--ember-700);
  --accent-border:   var(--ember-200);

  --focus-ring:      rgb(var(--rgb-accent) / 0.55);
  --focus-ring-width: 3px;
  --focus-ring-offset: 2px;

  /* ---------------------------------------------------------------------
     7. GRADIENTS
     --------------------------------------------------------------------- */
  /* --gradient-ember is the TEXT-SAFE fill: white on it clears 4.5:1 across
     the whole ramp. Use it anywhere white/on-accent text or an icon sits on
     the accent (buttons, active chips, badges, logo, feature icons).        */
  --gradient-ember:  linear-gradient(45deg, #d97706 0%, #dc2626 30%, #c13584 62%, #833ab4 84%, #5b51d8 100%);
  /* Decorative only — never put text on these two. */
  --gradient-ember-bright: linear-gradient(45deg, #ffdc80 0%, #f77737 25%, #fd1d1d 50%, #c13584 78%, #5b51d8 100%);
  --gradient-warm:   linear-gradient(45deg, #ffdc80 0%, #f77737 25%, #fd1d1d 50%, #c13584 78%, #5b51d8 100%);
  --gradient-dusk:   linear-gradient(160deg, #c13584 0%, #833ab4 55%, #5b51d8 100%);
  --gradient-paper:  linear-gradient(180deg, #ffffff 0%, #fafafa 100%);
  --gradient-ink:    linear-gradient(160deg, #000000 0%, #121212 100%);
  --gradient-moss:   linear-gradient(140deg, #833ab4 0%, #5b51d8 100%);
  --gradient-text:   linear-gradient(45deg, #d97706 0%, #dc2626 30%, #c13584 62%, #833ab4 84%, #5b51d8 100%);

  /* Ambient hero glow — a soft bloom drawn from the IG spectrum */
  --glow-hero:
    radial-gradient(60% 55% at 18% 8%,  rgb(var(--rgb-accent) / 0.16) 0%, transparent 70%),
    radial-gradient(50% 50% at 88% 22%, rgb(131 58 180 / 0.14) 0%, transparent 72%),
    radial-gradient(70% 60% at 50% 108%, rgb(64 93 230 / 0.10) 0%, transparent 70%);

  /* Deterministic avatar gradients — NO photographs anywhere in this product.
     IG spectrum; cycle g1..g8 by index. Tuned so white initials stay
     legible on the lightest stop of every gradient. */
  --avatar-g1: linear-gradient(135deg, #e1306c 0%, #a8134a 100%);
  --avatar-g2: linear-gradient(135deg, #833ab4 0%, #4c1d76 100%);
  --avatar-g3: linear-gradient(135deg, #f77737 0%, #c4400c 100%);
  --avatar-g4: linear-gradient(135deg, #5b51d8 0%, #2f2894 100%);
  --avatar-g5: linear-gradient(135deg, #405de6 0%, #1e33a8 100%);
  --avatar-g6: linear-gradient(135deg, #c13584 0%, #7a1f52 100%);
  --avatar-g7: linear-gradient(135deg, #fd1d1d 0%, #a80f0f 100%);
  --avatar-g8: linear-gradient(135deg, #fcaf45 0%, #d97706 100%);

  /* ---------------------------------------------------------------------
     8. TYPOGRAPHY — system stacks only (offline-safe, zero network)
     --------------------------------------------------------------------- */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, "Noto Sans", sans-serif,
               "Apple Color Emoji", "Segoe UI Emoji";
  --font-display: "SF Pro Display", -apple-system, BlinkMacSystemFont,
               "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
               "Liberation Mono", monospace;

  /* Fluid where it matters. Verified legible at 390px. */
  --text-3xs:     0.625rem;   /* 10 */
  --text-2xs:     0.6875rem;  /* 11 */
  --text-xs:      0.75rem;    /* 12 */
  --text-sm:      0.8125rem;  /* 13 */
  --text-md:      0.875rem;   /* 14 */
  --text-base:    1rem;       /* 16 */
  --text-lg:      1.0625rem;  /* 17 */
  --text-xl:      1.1875rem;  /* 19 */
  --text-2xl:     clamp(1.3125rem, 1.24rem + 0.36vw, 1.5rem);
  --text-3xl:     clamp(1.5rem,  1.36rem + 0.62vw, 1.8125rem);
  --text-4xl:     clamp(1.75rem, 1.49rem + 1.15vw, 2.3125rem);
  --text-5xl:     clamp(2.0625rem, 1.65rem + 1.85vw, 2.9375rem);
  --text-6xl:     clamp(2.375rem, 1.79rem + 2.6vw, 3.625rem);
  --text-display: clamp(2.625rem, 1.55rem + 4.8vw, 5rem);

  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-heavy:    800;

  --leading-none:    1;
  --leading-tight:   1.08;
  --leading-snug:    1.24;
  --leading-normal:  1.55;
  --leading-relaxed: 1.7;

  --tracking-tighter: -0.032em;
  --tracking-tight:   -0.018em;
  --tracking-normal:  0em;
  --tracking-wide:    0.012em;
  --tracking-wider:   0.085em;   /* eyebrows / all-caps */

  --measure:        62ch;   /* comfortable prose width */
  --measure-narrow: 44ch;
  --measure-wide:   78ch;

  /* ---------------------------------------------------------------------
     9a. SPACING — 4px base
     --------------------------------------------------------------------- */
  --space-px:  1px;
  --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-7:   1.75rem;   /* 28 */
  --space-8:   2rem;      /* 32 */
  --space-10:  2.5rem;    /* 40 */
  --space-12:  3rem;      /* 48 */
  --space-14:  3.5rem;    /* 56 */
  --space-16:  4rem;      /* 64 */
  --space-20:  5rem;      /* 80 */
  --space-24:  6rem;      /* 96 */
  --space-28:  7rem;      /* 112 */
  --space-32:  8rem;      /* 128 */

  --section-y:  clamp(3.5rem, 2.2rem + 5.5vw, 7rem);
  --gutter:     clamp(1.125rem, 0.7rem + 1.8vw, 2rem);

  --container-xs: 30rem;   /* 480  */
  --container-sm: 40rem;   /* 640  */
  --container-md: 52rem;   /* 832  */
  --container-lg: 64rem;   /* 1024 */
  --container-xl: 75rem;   /* 1200 */

  --nav-h: 60px;

  /* ---------------------------------------------------------------------
     9b. RADII
     --------------------------------------------------------------------- */
  --radius-xs:  6px;
  --radius-sm:  10px;
  --radius-md:  14px;
  --radius-lg:  18px;
  --radius-xl:  24px;
  --radius-2xl: 32px;
  --radius-3xl: 40px;
  --radius-pill: 999px;
  --radius-circle: 50%;
  --radius-device: 46px;

  /* ---------------------------------------------------------------------
     9c. SHADOWS — neutral
     --------------------------------------------------------------------- */
  --shadow-rgb: 0 0 0;
  --shadow-xs:  0 1px 2px rgb(var(--shadow-rgb) / 0.06);
  --shadow-sm:  0 1px 2px rgb(var(--shadow-rgb) / 0.05),
                0 2px 6px rgb(var(--shadow-rgb) / 0.05);
  --shadow-md:  0 2px 4px rgb(var(--shadow-rgb) / 0.05),
                0 8px 20px rgb(var(--shadow-rgb) / 0.07);
  --shadow-lg:  0 4px 8px rgb(var(--shadow-rgb) / 0.05),
                0 18px 38px rgb(var(--shadow-rgb) / 0.10);
  --shadow-xl:  0 8px 16px rgb(var(--shadow-rgb) / 0.06),
                0 32px 64px rgb(var(--shadow-rgb) / 0.13);
  --shadow-2xl: 0 12px 24px rgb(var(--shadow-rgb) / 0.08),
                0 48px 96px rgb(var(--shadow-rgb) / 0.18);
  --shadow-accent: 0 8px 24px rgb(var(--rgb-accent) / 0.28),
                   0 2px 6px rgb(var(--rgb-accent) / 0.20);
  --shadow-inset-top: inset 0 1px 0 rgb(255 255 255 / 0.7);
  --shadow-ring: 0 0 0 1px var(--border);

  /* ---------------------------------------------------------------------
     9d. MOTION
     --------------------------------------------------------------------- */
  --dur-instant: 80ms;
  --dur-fast:    140ms;
  --dur-normal:  220ms;
  --dur-slow:    380ms;
  --dur-slower:  620ms;
  --dur-reveal:  760ms;

  --ease-standard: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:       cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out:   cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);

  --transition-colors: color var(--dur-fast) var(--ease-standard),
                       background-color var(--dur-fast) var(--ease-standard),
                       border-color var(--dur-fast) var(--ease-standard);
  --transition-transform: transform var(--dur-normal) var(--ease-out);
  --transition-all: all var(--dur-normal) var(--ease-standard);

  /* ---------------------------------------------------------------------
     9e. Z-INDEX LAYERS
     --------------------------------------------------------------------- */
  --z-below:   -1;
  --z-base:     0;
  --z-raised:   10;
  --z-sticky:   100;
  --z-nav:      200;
  --z-dropdown: 300;
  --z-overlay:  400;
  --z-modal:    500;
  --z-toast:    600;
  --z-max:      9999;
}

/* ===========================================================================
   10. DARK THEME
   Warm charcoal, not slate. Ink stays brown-black; the ember lifts to a
   brighter coral-orange so it keeps AA contrast on dark surfaces.
   Applied both by system preference and by an explicit [data-theme] hook.
   =========================================================================== */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:              #000000;
    --bg-subtle:       #1a1614;
    --bg-inverse:      var(--sand-50);

    --surface:         #1e1a18;
    --surface-2:       #252020;
    --surface-3:       #2d2726;
    --surface-sunken:  #131010;
    --surface-inverse: var(--sand-100);

    --border:          rgb(255 246 236 / 0.11);
    --border-strong:   rgb(255 246 236 / 0.20);
    --border-subtle:   rgb(255 246 236 / 0.07);
    --border-accent:   rgb(225 48 108 / 0.42);

    --text:            #f6efe7;
    --text-secondary:  #d6cabd;
    --text-muted:      #a8998a;
    --text-subtle:     #8f8171;
    --text-inverse:    #262626;
    --text-on-accent:  #ffffff;
    --text-link:       #f472a6;

    --accent:          #e1306c;
    --accent-hover:    #ff8f66;
    --accent-press:    #c13584;
    --accent-soft:     rgb(225 48 108 / 0.13);
    --accent-soft-2:   rgb(225 48 108 / 0.22);
    --accent-text:     #f472a6;
    --accent-border:   rgb(225 48 108 / 0.32);

    --rgb-accent:      225 48 108;
    --rgb-ink:         246 239 231;
    --rgb-paper:       30 26 24;

    --color-success:       #6fb582;
    --color-success-bg:    rgb(111 181 130 / 0.13);
    --color-success-text:  #a8d8b6;
    --color-success-border: rgb(111 181 130 / 0.30);

    --color-warn:          #b57edc;
    --color-warn-bg:       rgb(131 58 180 / 0.18);
    --color-warn-text:     #dcbcf0;
    --color-warn-border:   rgb(131 58 180 / 0.38);

    --color-danger:        #e8695e;
    --color-danger-bg:     rgb(232 105 94 / 0.13);
    --color-danger-text:   #f3a49c;
    --color-danger-border: rgb(232 105 94 / 0.30);

    --color-info:          #8fb2cd;
    --color-info-bg:       rgb(143 178 205 / 0.12);
    --color-info-text:     #bcd4e6;
    --color-info-border:   rgb(143 178 205 / 0.28);

    --glass-bg:        rgb(24 20 19 / 0.68);
    --glass-bg-solid:  rgb(24 20 19 / 0.94);
    --glass-border:    rgb(255 246 236 / 0.10);
    --scrim:           rgb(8 6 5 / 0.62);
    --overlay-veil:    rgb(255 246 236 / 0.05);

    --gradient-ember:  linear-gradient(45deg, #f77737 0%, #fd1d1d 32%, #e1306c 62%, #833ab4 88%, #5b51d8 100%);
    --gradient-ember-bright: linear-gradient(45deg, #ffdc80 0%, #f77737 25%, #fd1d1d 50%, #c13584 78%, #5b51d8 100%);
    --gradient-paper:  linear-gradient(180deg, #1a1a1a 0%, #121212 100%);
    --gradient-ink:    linear-gradient(160deg, #121212 0%, #000000 100%);
    --gradient-text:   linear-gradient(45deg, #fcaf45 0%, #fd1d1d 35%, #e1306c 65%, #833ab4 100%);

    --glow-hero:
      radial-gradient(60% 55% at 18% 8%,  rgb(225 48 108 / 0.20) 0%, transparent 70%),
      radial-gradient(50% 50% at 88% 22%, rgb(131 58 180 / 0.14) 0%, transparent 72%),
      radial-gradient(70% 60% at 50% 108%, rgb(111 181 130 / 0.12) 0%, transparent 70%);

    --shadow-rgb: 0 0 0;
    --shadow-xs:  0 1px 2px rgb(0 0 0 / 0.34);
    --shadow-sm:  0 1px 2px rgb(0 0 0 / 0.30), 0 2px 6px rgb(0 0 0 / 0.28);
    --shadow-md:  0 2px 4px rgb(0 0 0 / 0.30), 0 8px 20px rgb(0 0 0 / 0.36);
    --shadow-lg:  0 4px 8px rgb(0 0 0 / 0.32), 0 18px 38px rgb(0 0 0 / 0.44);
    --shadow-xl:  0 8px 16px rgb(0 0 0 / 0.34), 0 32px 64px rgb(0 0 0 / 0.50);
    --shadow-2xl: 0 12px 24px rgb(0 0 0 / 0.38), 0 48px 96px rgb(0 0 0 / 0.58);
    --shadow-accent: 0 8px 26px rgb(225 48 108 / 0.30), 0 2px 6px rgb(225 48 108 / 0.22);
    --shadow-inset-top: inset 0 1px 0 rgb(255 255 255 / 0.06);

    --focus-ring: rgb(255 138 96 / 0.7);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --bg:              #000000;
  --bg-subtle:       #1a1614;
  --bg-inverse:      var(--sand-50);

  --surface:         #1e1a18;
  --surface-2:       #252020;
  --surface-3:       #2d2726;
  --surface-sunken:  #131010;
  --surface-inverse: var(--sand-100);

  --border:          rgb(255 246 236 / 0.11);
  --border-strong:   rgb(255 246 236 / 0.20);
  --border-subtle:   rgb(255 246 236 / 0.07);
  --border-accent:   rgb(225 48 108 / 0.42);

  --text:            #f6efe7;
  --text-secondary:  #d6cabd;
  --text-muted:      #a8998a;
  --text-subtle:     #8f8171;
  --text-inverse:    #262626;
  --text-on-accent:  #ffffff;
  --text-link:       #f472a6;

  --accent:          #e1306c;
  --accent-hover:    #ff8f66;
  --accent-press:    #c13584;
  --accent-soft:     rgb(225 48 108 / 0.13);
  --accent-soft-2:   rgb(225 48 108 / 0.22);
  --accent-text:     #f472a6;
  --accent-border:   rgb(225 48 108 / 0.32);

  --rgb-accent:      225 48 108;
  --rgb-ink:         246 239 231;
  --rgb-paper:       30 26 24;

  --color-success:       #6fb582;
  --color-success-bg:    rgb(111 181 130 / 0.13);
  --color-success-text:  #a8d8b6;
  --color-success-border: rgb(111 181 130 / 0.30);

  --color-warn:          #b57edc;
  --color-warn-bg:       rgb(131 58 180 / 0.18);
  --color-warn-text:     #dcbcf0;
  --color-warn-border:   rgb(131 58 180 / 0.38);

  --color-danger:        #e8695e;
  --color-danger-bg:     rgb(232 105 94 / 0.13);
  --color-danger-text:   #f3a49c;
  --color-danger-border: rgb(232 105 94 / 0.30);

  --color-info:          #8fb2cd;
  --color-info-bg:       rgb(143 178 205 / 0.12);
  --color-info-text:     #bcd4e6;
  --color-info-border:   rgb(143 178 205 / 0.28);

  --glass-bg:        rgb(24 20 19 / 0.68);
  --glass-bg-solid:  rgb(24 20 19 / 0.94);
  --glass-border:    rgb(255 246 236 / 0.10);
  --scrim:           rgb(8 6 5 / 0.62);
  --overlay-veil:    rgb(255 246 236 / 0.05);

  --gradient-ember:  linear-gradient(45deg, #f77737 0%, #fd1d1d 32%, #e1306c 62%, #833ab4 88%, #5b51d8 100%);
  --gradient-ember-bright: linear-gradient(45deg, #ffdc80 0%, #f77737 25%, #fd1d1d 50%, #c13584 78%, #5b51d8 100%);
  --gradient-paper:  linear-gradient(180deg, #1a1a1a 0%, #121212 100%);
  --gradient-ink:    linear-gradient(160deg, #121212 0%, #000000 100%);
  --gradient-text:   linear-gradient(45deg, #fcaf45 0%, #fd1d1d 35%, #e1306c 65%, #833ab4 100%);

  --glow-hero:
    radial-gradient(60% 55% at 18% 8%,  rgb(225 48 108 / 0.20) 0%, transparent 70%),
    radial-gradient(50% 50% at 88% 22%, rgb(131 58 180 / 0.14) 0%, transparent 72%),
    radial-gradient(70% 60% at 50% 108%, rgb(111 181 130 / 0.12) 0%, transparent 70%);

  --shadow-rgb: 0 0 0;
  --shadow-xs:  0 1px 2px rgb(0 0 0 / 0.34);
  --shadow-sm:  0 1px 2px rgb(0 0 0 / 0.30), 0 2px 6px rgb(0 0 0 / 0.28);
  --shadow-md:  0 2px 4px rgb(0 0 0 / 0.30), 0 8px 20px rgb(0 0 0 / 0.36);
  --shadow-lg:  0 4px 8px rgb(0 0 0 / 0.32), 0 18px 38px rgb(0 0 0 / 0.44);
  --shadow-xl:  0 8px 16px rgb(0 0 0 / 0.34), 0 32px 64px rgb(0 0 0 / 0.50);
  --shadow-2xl: 0 12px 24px rgb(0 0 0 / 0.38), 0 48px 96px rgb(0 0 0 / 0.58);
  --shadow-accent: 0 8px 26px rgb(225 48 108 / 0.30), 0 2px 6px rgb(225 48 108 / 0.22);
  --shadow-inset-top: inset 0 1px 0 rgb(255 255 255 / 0.06);

  --focus-ring: rgb(255 138 96 / 0.7);
}

/* Explicit light override (so a theme toggle can force light on a dark OS) */
:root[data-theme="light"] {
  color-scheme: light;
}

/* Motion tokens collapse when the user asks for less motion. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-instant: 1ms;
    --dur-fast:    1ms;
    --dur-normal:  1ms;
    --dur-slow:    1ms;
    --dur-slower:  1ms;
    --dur-reveal:  1ms;
  }
}

/* ===========================================================================
   INSTDATE BRAND OVERRIDE
   Instagram-adjacent visual language: white-dominant surfaces, the IG spectrum
   as the accent gradient, IG's neutral ramp (#262626 ink, #8e8e8e muted,
   #dbdbdb hairline), and IG's own web font stack.

   This block is appended deliberately so it wins over the Paper & Ember set
   above without editing 500 lines of tokens. To revert the brand, delete from
   here down.
   ======================================================================== */
:root {
  /* --- IG spectrum ------------------------------------------------------ */
  --ig-blue:    #405de6;
  --ig-indigo:  #5b51d8;
  --ig-purple:  #833ab4;
  --ig-magenta: #c13584;
  --ig-pink:    #e1306c;
  --ig-red:     #fd1d1d;
  --ig-orange:  #f56040;
  --ig-amber:   #f77737;
  --ig-yellow:  #fcaf45;
  --ig-sun:     #ffdc80;

  /* Solid accent. #c13584 keeps white text at 4.6:1, unlike #e1306c (3.6:1). */
  --accent:          #c13584;
  --accent-hover:    #a82d73;
  --accent-press:    #911f61;
  --accent-soft:     #fdf2f8;
  --accent-border:   #f5d0e4;
  --accent-text:     #a82d73;
  --rgb-accent:      193 53 132;
  --focus-ring:      rgb(193 53 132 / 0.55);

  /* The signature gradient. Text-safe variant is darkened at the ends so
     white on it clears 4.5:1 the whole way across. */
  --gradient-ig:        linear-gradient(45deg, #ffdc80 0%, #fcaf45 12%, #f77737 25%, #f56040 38%, #fd1d1d 52%, #e1306c 66%, #c13584 78%, #833ab4 90%, #5b51d8 100%);
  --gradient-ig-text:   linear-gradient(45deg, #d97706 0%, #dc2626 30%, #c13584 62%, #833ab4 84%, #5b51d8 100%);
  --gradient-ember:        var(--gradient-ig-text);
  --gradient-ember-bright: var(--gradient-ig);
  --gradient-warm:         var(--gradient-ig);

  /* --- surfaces: IG is white-dominant ----------------------------------- */
  --bg:            #ffffff;
  --bg-subtle:     #fafafa;
  --surface:       #ffffff;
  --surface-2:     #fafafa;
  --surface-3:     #f5f5f5;
  --surface-sunken:#fafafa;

  /* --- neutrals, straight off IG's UI ----------------------------------- */
  --text:           #262626;
  --text-secondary: #4b4b4b;
  --text-muted:     #737373;
  --text-subtle:    #8e8e8e;
  --border:         #dbdbdb;
  --border-strong:  #c7c7c7;
  --hairline:       #efefef;

  /* --- type: IG's own web stack ----------------------------------------- */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
               Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  --font-display: var(--font-sans);
  --tracking-tight:  -0.01em;
  --tracking-tighter:-0.022em;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #000000; --bg-subtle: #0a0a0a;
    --surface: #121212; --surface-2: #1a1a1a; --surface-3: #232323; --surface-sunken: #0a0a0a;
    --text: #fafafa; --text-secondary: #d4d4d4; --text-muted: #a8a8a8; --text-subtle: #8e8e8e;
    --border: #262626; --border-strong: #363636; --hairline: #1f1f1f;
    --accent: #e1306c; --accent-hover: #ec4b80; --accent-press: #c13584;
    --accent-soft: #2a1420; --accent-border: #4a2038; --accent-text: #f472a6;
    --rgb-accent: 225 48 108; --focus-ring: rgb(225 48 108 / 0.6);
  }
}
:root[data-theme="dark"] {
  --bg: #000000; --bg-subtle: #0a0a0a;
  --surface: #121212; --surface-2: #1a1a1a; --surface-3: #232323; --surface-sunken: #0a0a0a;
  --text: #fafafa; --text-secondary: #d4d4d4; --text-muted: #a8a8a8; --text-subtle: #8e8e8e;
  --border: #262626; --border-strong: #363636; --hairline: #1f1f1f;
  --accent: #e1306c; --accent-hover: #ec4b80; --accent-press: #c13584;
  --accent-soft: #2a1420; --accent-border: #4a2038; --accent-text: #f472a6;
  --rgb-accent: 225 48 108; --focus-ring: rgb(225 48 108 / 0.6);
}

/* Primary button carries the spectrum, the way IG's own CTAs do. */
.peitho-none {}