/* ==========================================================================
   KATARI JYOTHSNA - Wedding Design & Decor
   tokens.css - Design tokens, colour system, light/dark themes, type scale
   --------------------------------------------------------------------------
   Nothing in this file paints anything. It only DEFINES the language every
   other stylesheet speaks. Change a value here and the whole site follows.
   Load this file first, always.

   Direction: warm cream ground, deep plum ink, and a hot magenta -> orange
   -> marigold gradient carried through every accent. Festive rather than
   muted - the palette of the ceremonies themselves.
   ========================================================================== */

/* --- Animatable custom properties (gradient + glow motion) --------------- */
@property --shine {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 0%;
}
@property --angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}
@property --glow {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 40%;
}

/* ==========================================================================
   1. BRAND PALETTE  (raw values - never used directly by components)
   ========================================================================== */
:root {
  /* Plum - the ink, and the ground of every dark band */
  --brand-plum-900: #12040F;
  --brand-plum-800: #1A0616;
  --brand-plum-700: #21061D;
  --brand-plum-600: #29081F;
  --brand-plum-500: #4A1435;
  --brand-plum-400: #6E2450;
  --brand-plum-300: #8A6579;
  --brand-plum-200: #C9A9BC;
  --brand-plum-100: #EBD8E3;

  /* The gradient: magenta -> orange -> marigold */
  --brand-magenta-700: #A50E4E;
  --brand-magenta-600: #C81260;
  --brand-magenta-500: #E11D6E;
  --brand-magenta-400: #F0508F;
  --brand-magenta-200: #FAC0D8;

  --brand-orange-600: #E85A1E;
  --brand-orange-500: #FF6B2C;
  --brand-orange-300: #FFA477;

  --brand-amber-500:  #F79A0B;
  --brand-marigold:   #FFC53D;
  --brand-marigold-200: #FFE9B8;

  /* Cream / blush neutrals */
  --brand-cream-50:  #FFFCFA;
  --brand-cream-100: #FFF8F4;
  --brand-cream-200: #FDEDE6;
  --brand-cream-300: #F6DFD6;
  --brand-cream-400: #E8CABE;

  /* Supporting tones */
  --brand-green:  #2E7D5B;   /* WhatsApp / success */
  --brand-teal:   #2F6E66;
  --brand-red:    #D3324B;

  /* Type families */
  --font-display: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --font-accent:  'Fraunces', Georgia, serif;
  --font-body:    'Jost', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, 'SFMono-Regular', monospace;

  /* Fluid type scale - 320px viewport up to 1600px */
  --step--2: clamp(0.694rem, 0.68rem + 0.07vw, 0.75rem);
  --step--1: clamp(0.833rem, 0.80rem + 0.16vw, 0.938rem);
  --step-0:  clamp(1rem, 0.96rem + 0.20vw, 1.125rem);
  --step-1:  clamp(1.2rem, 1.13rem + 0.35vw, 1.44rem);
  --step-2:  clamp(1.44rem, 1.32rem + 0.58vw, 1.84rem);
  --step-3:  clamp(1.728rem, 1.54rem + 0.94vw, 2.36rem);
  --step-4:  clamp(2.074rem, 1.78rem + 1.47vw, 3.02rem);
  --step-5:  clamp(2.488rem, 2.04rem + 2.24vw, 3.86rem);
  --step-6:  clamp(2.986rem, 2.32rem + 3.33vw, 4.94rem);
  --step-7:  clamp(3.583rem, 2.62rem + 4.82vw, 6.32rem);
  --step-8:  clamp(4.3rem, 2.90rem + 7.00vw, 8.09rem);

  /* Spacing */
  --sp-3xs: 0.25rem;
  --sp-2xs: 0.5rem;
  --sp-xs:  0.75rem;
  --sp-s:   1rem;
  --sp-m:   1.5rem;
  --sp-l:   2rem;
  --sp-xl:  3rem;
  --sp-2xl: 4rem;
  --sp-3xl: 6rem;
  --sp-4xl: 8rem;
  --section-y: clamp(4.5rem, 9vw, 9rem);
  --gutter:    clamp(1.25rem, 4vw, 3rem);

  /* Measure + containers */
  --measure: 68ch;
  --container: 1360px;
  --container-narrow: 880px;
  --container-wide: 1660px;

  /* Radii - this direction is soft and rounded, not sharp */
  --r-xs: 6px;
  --r-s:  10px;
  --r-m:  16px;
  --r-l:  24px;
  --r-xl: 32px;
  --r-2xl: 44px;
  --r-arch: 50% 50% var(--r-l) var(--r-l) / 34% 34% var(--r-l) var(--r-l);
  --r-pill: 999px;

  /* Motion */
  --ease-out-expo:  cubic-bezier(0.16, 1, 0.30, 1);
  --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out:    cubic-bezier(0.65, 0.05, 0.36, 1);
  --ease-spring:    cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast:  180ms;
  --dur-base:  320ms;
  --dur-slow:  620ms;
  --dur-xslow: 1100ms;

  /* Layering */
  --z-grain:  9000;
  --z-cursor: 9500;
  --z-header: 800;
  --z-drawer: 850;
  --z-modal:  900;
  --z-loader: 9800;

  /* Set by header.js so pages can offset sticky content */
  --header-h: 86px;

  /* THE gradient. Used on buttons, rules, italic words and icons. */
  --grad: linear-gradient(90deg, var(--brand-magenta-500) 0%, var(--brand-orange-500) 52%, var(--brand-marigold) 100%);
  --grad-soft: linear-gradient(90deg, var(--brand-magenta-600) 0%, var(--brand-orange-600) 55%, var(--brand-amber-500) 100%);

  /* A phulkari-style diamond watermark laid over cream sections */
  --pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%2329081F' stroke-opacity='0.055' stroke-width='1'%3E%3Cpath d='M60 6 114 60 60 114 6 60Z'/%3E%3Cpath d='M60 26 94 60 60 94 26 60Z'/%3E%3Cpath d='M60 44 76 60 60 76 44 60Z'/%3E%3C/g%3E%3C/svg%3E");
}

/* ==========================================================================
   2. SEMANTIC TOKENS - LIGHT (the default, defined on bare :root)
   ========================================================================== */
:root,
[data-theme="light"] {
  color-scheme: light;

  --bg:           var(--brand-cream-100);
  --bg-alt:       var(--brand-cream-200);
  --bg-deep:      var(--brand-plum-700);
  --surface:      #FFFFFF;
  --surface-2:    var(--brand-cream-50);
  --surface-sunk: var(--brand-cream-200);

  --ink:        var(--brand-plum-600);
  --ink-strong: var(--brand-plum-800);
  --ink-soft:   #5C3B4E;
  --ink-muted:  var(--brand-plum-300);
  --ink-invert: var(--brand-cream-100);

  --accent:      var(--brand-magenta-600);
  --accent-2:    var(--brand-orange-500);
  --accent-3:    var(--brand-marigold);
  --accent-soft: var(--brand-cream-200);
  --accent-ink:  #FFFFFF;
  --gold:        var(--brand-amber-500);
  --gold-soft:   var(--brand-marigold-200);

  --line:        color-mix(in oklab, #29081F 12%, transparent);
  --line-strong: color-mix(in oklab, #29081F 24%, transparent);
  --line-accent: color-mix(in oklab, #E11D6E 34%, transparent);
  --line-gold:   color-mix(in oklab, #F79A0B 38%, transparent);

  --shadow-s: 0 1px 2px rgba(41,8,31,.04), 0 2px 8px rgba(41,8,31,.04);
  --shadow-m: 0 2px 8px rgba(41,8,31,.04), 0 16px 36px -14px rgba(41,8,31,.14);
  --shadow-l: 0 8px 22px rgba(41,8,31,.06), 0 46px 90px -34px rgba(41,8,31,.22);
  --shadow-glow: 0 16px 40px -16px color-mix(in oklab, #E11D6E 46%, transparent);

  --glass:        color-mix(in oklab, #FFFFFF 74%, transparent);
  --glass-border: color-mix(in oklab, #29081F 9%, transparent);

  --grain-opacity: .14;
  --pattern-opacity: 1;
  --mesh-1: color-mix(in oklab, var(--brand-magenta-200) 70%, transparent);
  --mesh-2: color-mix(in oklab, var(--brand-marigold-200) 78%, transparent);
  --mesh-3: color-mix(in oklab, var(--brand-cream-300) 80%, transparent);

  --scrim: linear-gradient(to top, rgba(18,4,15,.88) 0%, rgba(18,4,15,.42) 48%, rgba(18,4,15,0) 100%);
}

/* ==========================================================================
   3. SEMANTIC TOKENS - DARK
   ========================================================================== */
[data-theme="dark"] {
  color-scheme: dark;

  --bg:           var(--brand-plum-900);
  --bg-alt:       var(--brand-plum-800);
  --bg-deep:      #0B0209;
  --surface:      #1D0719;
  --surface-2:    #260A20;
  --surface-sunk: #150510;

  --ink:        #F6E9F0;
  --ink-strong: #FFFFFF;
  --ink-soft:   #D9BFCE;
  --ink-muted:  #A08191;
  --ink-invert: var(--brand-plum-900);

  --accent:      var(--brand-magenta-400);
  --accent-2:    var(--brand-orange-300);
  --accent-3:    var(--brand-marigold);
  --accent-soft: color-mix(in oklab, #E11D6E 20%, transparent);
  --accent-ink:  #FFFFFF;
  --gold:        var(--brand-marigold);
  --gold-soft:   color-mix(in oklab, #FFC53D 20%, transparent);

  --line:        color-mix(in oklab, #F6E9F0 14%, transparent);
  --line-strong: color-mix(in oklab, #F6E9F0 26%, transparent);
  --line-accent: color-mix(in oklab, #F0508F 42%, transparent);
  --line-gold:   color-mix(in oklab, #FFC53D 38%, transparent);

  --shadow-s: 0 1px 2px rgba(0,0,0,.5), 0 2px 10px rgba(0,0,0,.4);
  --shadow-m: 0 6px 16px rgba(0,0,0,.45), 0 22px 44px -16px rgba(0,0,0,.62);
  --shadow-l: 0 14px 30px rgba(0,0,0,.5), 0 54px 96px -34px rgba(0,0,0,.75);
  --shadow-glow: 0 20px 54px -20px color-mix(in oklab, #E11D6E 62%, transparent);

  --glass:        color-mix(in oklab, #2A0B23 66%, transparent);
  --glass-border: color-mix(in oklab, #F6E9F0 13%, transparent);

  --grain-opacity: .20;
  --pattern-opacity: .5;
  --mesh-1: color-mix(in oklab, var(--brand-magenta-600) 40%, transparent);
  --mesh-2: color-mix(in oklab, var(--brand-amber-500) 22%, transparent);
  --mesh-3: color-mix(in oklab, var(--brand-plum-500) 55%, transparent);

  --scrim: linear-gradient(to top, rgba(6,1,5,.92) 0%, rgba(6,1,5,.46) 48%, rgba(6,1,5,0) 100%);
}

/* --- Follow the OS when the visitor has not chosen ----------------------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --bg:           var(--brand-plum-900);
    --bg-alt:       var(--brand-plum-800);
    --bg-deep:      #0B0209;
    --surface:      #1D0719;
    --surface-2:    #260A20;
    --surface-sunk: #150510;

    --ink:        #F6E9F0;
    --ink-strong: #FFFFFF;
    --ink-soft:   #D9BFCE;
    --ink-muted:  #A08191;
    --ink-invert: var(--brand-plum-900);

    --accent:      var(--brand-magenta-400);
    --accent-2:    var(--brand-orange-300);
    --accent-3:    var(--brand-marigold);
    --accent-soft: color-mix(in oklab, #E11D6E 20%, transparent);
    --accent-ink:  #FFFFFF;
    --gold:        var(--brand-marigold);
    --gold-soft:   color-mix(in oklab, #FFC53D 20%, transparent);

    --line:        color-mix(in oklab, #F6E9F0 14%, transparent);
    --line-strong: color-mix(in oklab, #F6E9F0 26%, transparent);
    --line-accent: color-mix(in oklab, #F0508F 42%, transparent);
    --line-gold:   color-mix(in oklab, #FFC53D 38%, transparent);

    --shadow-s: 0 1px 2px rgba(0,0,0,.5), 0 2px 10px rgba(0,0,0,.4);
    --shadow-m: 0 6px 16px rgba(0,0,0,.45), 0 22px 44px -16px rgba(0,0,0,.62);
    --shadow-l: 0 14px 30px rgba(0,0,0,.5), 0 54px 96px -34px rgba(0,0,0,.75);
    --shadow-glow: 0 20px 54px -20px color-mix(in oklab, #E11D6E 62%, transparent);

    --glass:        color-mix(in oklab, #2A0B23 66%, transparent);
    --glass-border: color-mix(in oklab, #F6E9F0 13%, transparent);

    --grain-opacity: .20;
    --pattern-opacity: .5;
    --mesh-1: color-mix(in oklab, var(--brand-magenta-600) 40%, transparent);
    --mesh-2: color-mix(in oklab, var(--brand-amber-500) 22%, transparent);
    --mesh-3: color-mix(in oklab, var(--brand-plum-500) 55%, transparent);

    --scrim: linear-gradient(to top, rgba(6,1,5,.92) 0%, rgba(6,1,5,.46) 48%, rgba(6,1,5,0) 100%);
  }
}

/* ==========================================================================
   4. LOCAL INVERSION - a deep plum band dropped inside a cream page
   ========================================================================== */
.invert {
  color-scheme: dark;
  --bg:        var(--brand-plum-700);
  --bg-alt:    var(--brand-plum-800);
  --surface:   color-mix(in oklab, #FFFFFF 7%, #21061D);
  --surface-2: color-mix(in oklab, #FFFFFF 11%, #21061D);
  --surface-sunk: var(--brand-plum-900);

  --ink:        var(--brand-cream-100);
  --ink-strong: #FFFFFF;
  --ink-soft:   color-mix(in oklab, #FFF8F4 80%, transparent);
  --ink-muted:  color-mix(in oklab, #FFF8F4 58%, transparent);
  --ink-invert: var(--brand-plum-800);

  --accent:      var(--brand-magenta-400);
  --accent-2:    var(--brand-orange-300);
  --accent-soft: color-mix(in oklab, #E11D6E 22%, transparent);
  --accent-ink:  #FFFFFF;
  --gold:        var(--brand-marigold);
  --gold-soft:   color-mix(in oklab, #FFC53D 20%, transparent);

  --line:        color-mix(in oklab, #FFF8F4 16%, transparent);
  --line-strong: color-mix(in oklab, #FFF8F4 30%, transparent);
  --line-accent: color-mix(in oklab, #F0508F 46%, transparent);
  --line-gold:   color-mix(in oklab, #FFC53D 42%, transparent);

  --glass:        color-mix(in oklab, #FFFFFF 8%, transparent);
  --glass-border: color-mix(in oklab, #FFFFFF 15%, transparent);
  --pattern-opacity: .35;
  --mesh-1: color-mix(in oklab, var(--brand-magenta-600) 44%, transparent);
  --mesh-2: color-mix(in oklab, var(--brand-amber-500) 24%, transparent);
  --mesh-3: color-mix(in oklab, var(--brand-plum-500) 58%, transparent);

  background-color: var(--bg);
  color: var(--ink);
}