/* Zocane — Design Tokens (raw CSS custom properties)
   MD3 Expressive · Light theme · All palettes derived via deriveTonal()
   Sapphire/Rose at baseStop=40 · Champagne at baseStop=80 · Neutral at baseStop=95 */

:root {
  /* ── Brand core ───────────────────────────────────── */
  --zo-sapphire:        #1A2D6B;   /* primary   P-40 */
  --zo-rose-gold:       #B76E79;   /* secondary P-40 */
  --zo-ivory:           #FBF8F3;   /* surface   N-99 */
  --zo-champagne:       #E8DCC4;   /* tertiary  P-80 */
  --zo-cream:           #F4EDE0;   /* neutral   N-95 */

  /* ── Sapphire tonal palette · base = P-40 (#1A2D6B) ── */
  --zo-sapphire-0:    #000000;
  --zo-sapphire-10:   #080a11;
  --zo-sapphire-20:   #101526;
  --zo-sapphire-30:   #1c2440;
  --zo-sapphire-40:   #1a2d6b;  /* P-40 = primary */
  --zo-sapphire-50:   #2744a1;
  --zo-sapphire-60:   #4465d2;
  --zo-sapphire-70:   #7991df;
  --zo-sapphire-80:   #a6b6e9;
  --zo-sapphire-90:   #d8deef;
  --zo-sapphire-92:   #e1e5f1;
  --zo-sapphire-94:   #eaecf4;
  --zo-sapphire-95:   #eeeff5;
  --zo-sapphire-96:   #f1f3f7;
  --zo-sapphire-99:   #fcfcfd;
  --zo-sapphire-100:  #FFFFFF;

  /* ── Rose Gold tonal palette · base = P-40 (#B76E79) ── */
  --zo-rose-0:    #000000;
  --zo-rose-10:   #211517;
  --zo-rose-20:   #50272e;
  --zo-rose-30:   #87434d;
  --zo-rose-40:   #b76e79;  /* P-40 = secondary */
  --zo-rose-50:   #c48790;
  --zo-rose-60:   #d2a5ac;
  --zo-rose-70:   #debfc4;
  --zo-rose-80:   #e6d6d9;
  --zo-rose-90:   #f1ebec;
  --zo-rose-92:   #f3eff0;
  --zo-rose-94:   #f6f3f4;
  --zo-rose-95:   #f7f5f5;
  --zo-rose-96:   #f9f7f7;
  --zo-rose-99:   #fdfcfc;
  --zo-rose-100:  #FFFFFF;

  /* ── Champagne tonal (tertiary) · base = P-80 (#E8DCC4) */
  --zo-champ-0:    #000000;
  --zo-champ-10:   #15120b;
  --zo-champ-20:   #2d2619;
  --zo-champ-30:   #554321;
  --zo-champ-40:   #7b6230;
  --zo-champ-50:   #a98742;
  --zo-champ-60:   #c7aa6f;
  --zo-champ-70:   #d9c59e;
  --zo-champ-80:   #e5dbc7;  /* P-80 = tertiary */
  --zo-champ-90:   #efece5;
  --zo-champ-92:   #f2f0eb;
  --zo-champ-94:   #f5f3f0;
  --zo-champ-95:   #f6f5f2;
  --zo-champ-96:   #f8f7f5;
  --zo-champ-99:   #fdfdfc;
  --zo-champ-100:  #FFFFFF;

  /* ── Neutral (warm) · base = N-95 (#F4EDE0, satCap=14) ─ */
  --zo-neutral-0:    #000000;
  --zo-neutral-10:   #1B1814;
  --zo-neutral-20:   #2F2B25;
  --zo-neutral-30:   #46413A;
  --zo-neutral-40:   #5E5851;
  --zo-neutral-50:   #787169;
  --zo-neutral-60:   #938B82;
  --zo-neutral-70:   #AFA79D;
  --zo-neutral-80:   #CCC4BA;
  --zo-neutral-90:   #E8E1D6;
  --zo-neutral-92:   #EDE6DA;  /* surface-container-highest */
  --zo-neutral-94:   #F2EBDE;  /* surface-container */
  --zo-neutral-95:   #F4EDE0;  /* cream */
  --zo-neutral-96:   #F6F0E5;  /* surface-container-low */
  --zo-neutral-99:   #FBF8F3;  /* ivory */
  --zo-neutral-100:  #FFFFFF;

  /* ── Error ────────────────────────────────────────── */
  --zo-error-10:  #410002;
  --zo-error-20:  #690005;
  --zo-error-30:  #93000A;
  --zo-error-40:  #BA1A1A;
  --zo-error-50:  #DE3730;
  --zo-error-80:  #FFB4AB;
  --zo-error-90:  #FFDAD6;
  --zo-error-95:  #FFEDEA;

  /* ── MD3 semantic mapping · light mode ───────────── */
  /* Primary  P-40 / on=white / container=P-90 / on-container=P-10 */
  --md-primary:                 var(--zo-sapphire-40);
  --md-on-primary:              #FFFFFF;
  --md-primary-container:       var(--zo-sapphire-90);
  --md-on-primary-container:    var(--zo-sapphire-10);

  /* Secondary  P-40 / on=white / container=P-90 / on-container=P-10 */
  --md-secondary:               var(--zo-rose-40);
  --md-on-secondary:            #FFFFFF;
  --md-secondary-container:     var(--zo-rose-90);
  --md-on-secondary-container:  var(--zo-rose-10);

  /* Tertiary  P-40 / on=white / container=P-90 / on-container=P-10 */
  --md-tertiary:                var(--zo-champ-40);
  --md-on-tertiary:             #FFFFFF;
  --md-tertiary-container:      var(--zo-champ-90);
  --md-on-tertiary-container:   var(--zo-champ-10);

  /* Error — fixed MD3 palette */
  --md-error:                   #BA1A1A;
  --md-on-error:                #FFFFFF;
  --md-error-container:         #FFDAD6;
  --md-on-error-container:      #410002;

  /* Background / Surface  N-99 / N-10 */
  --md-background:              var(--zo-ivory);
  --md-on-background:           var(--zo-neutral-10);
  --md-surface:                 var(--zo-ivory);
  --md-on-surface:              var(--zo-neutral-10);

  /* Surface variant  N-90 / N-30 */
  --md-surface-variant:         var(--zo-neutral-90);
  --md-on-surface-variant:      var(--zo-neutral-30);

  /* Surface container hierarchy  N-100 / N-96 / N-94 / N-92 / N-90 */
  --md-surface-container-lowest:  #FFFFFF;
  --md-surface-container-low:     var(--zo-neutral-96);
  --md-surface-container:         var(--zo-neutral-94);
  --md-surface-container-high:    var(--zo-neutral-92);
  --md-surface-container-highest: var(--zo-neutral-90);

  /* Outline  N-50 / N-80 */
  --md-outline:                 var(--zo-neutral-50);
  --md-outline-variant:         var(--zo-neutral-80);

  /* Inverse  N-20 / N-95 / P-80 */
  --md-inverse-surface:         var(--zo-neutral-20);
  --md-inverse-on-surface:      var(--zo-neutral-95);
  --md-inverse-primary:         var(--zo-sapphire-80);

  --md-scrim:                   #000000;
  --md-shadow:                  #000000;

  /* ── M3 Shape scale (softer — bumped one step) ────── */
  --shape-none: 0px;
  --shape-xs:  8px;     /* default 4 → 8 */
  --shape-sm:  12px;    /* default 8 → 12 */
  --shape-md:  16px;    /* default 12 → 16 */
  --shape-lg:  24px;    /* default 16 → 24 */
  --shape-xl:  32px;    /* default 28 → 32 */
  --shape-2xl: 40px;    /* extra-large */
  --shape-pill: 9999px;
  --shape-full: 9999px;

  /* ── Elevation ────────────────────────────────────── */
  --elev-1: 0 1px 2px rgba(10,18,48,0.08), 0 1px 3px rgba(10,18,48,0.04);
  --elev-2: 0 2px 6px rgba(10,18,48,0.10), 0 1px 2px rgba(10,18,48,0.06);
  --elev-3: 0 4px 12px rgba(10,18,48,0.12), 0 2px 4px rgba(10,18,48,0.08);
  --elev-4: 0 8px 24px rgba(10,18,48,0.14), 0 4px 8px rgba(10,18,48,0.10);
  --elev-5: 0 16px 40px rgba(10,18,48,0.18), 0 8px 16px rgba(10,18,48,0.12);

  /* ── Type families ────────────────────────────────── */
  --font-display: "Bricolage Grotesque", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* ── MD3 Type Scale ───────────────────────────────── */
  /* Display */
  --type-display-large-size:   57px; --type-display-large-line:   64px; --type-display-large-tracking:  -0.25px;
  --type-display-medium-size:  45px; --type-display-medium-line:  52px; --type-display-medium-tracking: 0px;
  --type-display-small-size:   36px; --type-display-small-line:   44px; --type-display-small-tracking:  0px;
  /* Headline */
  --type-headline-large-size:  32px; --type-headline-large-line:  40px; --type-headline-large-tracking: 0px;
  --type-headline-medium-size: 28px; --type-headline-medium-line: 36px; --type-headline-medium-tracking:0px;
  --type-headline-small-size:  24px; --type-headline-small-line:  32px; --type-headline-small-tracking: 0px;
  /* Title */
  --type-title-large-size:     22px; --type-title-large-line:     28px; --type-title-large-tracking:    0px;
  --type-title-medium-size:    16px; --type-title-medium-line:    24px; --type-title-medium-tracking:   0.15px;
  --type-title-small-size:     14px; --type-title-small-line:     20px; --type-title-small-tracking:    0.10px;
  /* Body */
  --type-body-large-size:      16px; --type-body-large-line:      24px; --type-body-large-tracking:     0.50px;
  --type-body-medium-size:     14px; --type-body-medium-line:     20px; --type-body-medium-tracking:    0.25px;
  --type-body-small-size:      12px; --type-body-small-line:      16px; --type-body-small-tracking:     0.40px;
  /* Label */
  --type-label-large-size:     14px; --type-label-large-line:     20px; --type-label-large-tracking:    0.10px;
  --type-label-medium-size:    12px; --type-label-medium-line:    16px; --type-label-medium-tracking:   0.50px;
  --type-label-small-size:     11px; --type-label-small-line:     16px; --type-label-small-tracking:    0.50px;

  /* ── Motion (MD3 Expressive easing) ───────────────── */
  --motion-emphasized:        cubic-bezier(0.2, 0.0, 0, 1.0);
  --motion-emphasized-decel:  cubic-bezier(0.05, 0.7, 0.1, 1.0);
  --motion-emphasized-accel:  cubic-bezier(0.3, 0.0, 0.8, 0.15);
  --motion-standard:          cubic-bezier(0.2, 0.0, 0, 1.0);
  --duration-short-1:  50ms;
  --duration-short-2:  100ms;
  --duration-medium-1: 250ms;
  --duration-medium-2: 300ms;
  --duration-long-1:   450ms;
  --duration-long-2:   500ms;
}