/* PROJECT MANU MAHARAJ — Design System Tokens v2.0 */
/* ======================================================================
   GOTRA GURU — Unified Design Tokens
   Single source of truth for colours, type, spacing, radii, shadows, motion.
   v2 adds the full saffron/parchment/ink scales, semantic surface tokens,
   spacing scale, and Inter Tight body font (replaces Baloo 2 per D2).
   Legacy v1 aliases (--saffron, --parchment, --rad, --shadow-2, --f-body)
   are preserved at the bottom so existing app.css keeps working.
   ====================================================================== */

:root{
  /* =========================================================
     1. CORE PALETTE — saffron / kumkum / parchment / ink
     ========================================================= */

  /* Brand — saffron */
  --saffron-50:  #FDF3EA;
  --saffron-100: #FBE3CC;
  --saffron-200: #F6C896;
  --saffron-300: #F1A862;
  --saffron-400: #ED8A3A;
  --saffron-500: #E8650A;   /* PRIMARY brand */
  --saffron-600: #C5500A;
  --saffron-700: #9C3F08;
  --saffron-800: #6E2C06;
  --saffron-900: #3E1903;

  /* Kumkum red — the bindu dot in the wordmark */
  --kumkum-500: #C1272D;
  --kumkum-600: #991B1B;
  --kumkum-700: #7F1D1D;

  /* Ochre / gold — secondary accent */
  --ochre-400: #D9A23A;
  --ochre-500: #C8860A;
  --ochre-600: #A06A07;

  /* Muted gold — verified tier */
  --gold-400: #D7BC68;
  --gold-500: #C9A84C;
  --gold-600: #A88A33;

  /* Sandalwood — heritage cards */
  --sandal-200: #EBD3A8;
  --sandal-400: #D4A76A;
  --sandal-600: #A88147;

  /* Parchment — base surfaces */
  --parchment-50:  #FDFAF3;
  --parchment-100: #FAF4E8;  /* primary surface */
  --parchment-200: #F2E8D2;
  --parchment-300: #E6D7B5;

  /* Ink — text + dark surfaces */
  --ink-50:  #F4F2EE;
  --ink-100: #E1DCD3;
  --ink-300: #8A8276;
  --ink-500: #4A4338;
  --ink-700: #2B2218;
  --ink-900: #1C1008;        /* primary text + ink-bg */
  --ink-950: #0F0905;

  /* Stone — neutral cool grey for secondary UI */
  --stone-100: #EFECE7;
  --stone-300: #C8C2B9;
  --stone-500: #6B6560;
  --stone-700: #3F3B36;

  /* Semantic */
  --verified-green:      #2D6A4F;
  --verified-green-soft: #DDE9E2;
  --disputed-amber:      #D4860A;
  --disputed-amber-soft: #FBEBC9;
  --danger-color:        #8B1A1A;
  --danger-soft:         #F5DCDC;
  --admin-slate:         #2C3E50;
  --info:                #1F4E79;

  /* =========================================================
     2. SEMANTIC SURFACES + FOREGROUND
     ========================================================= */
  --bg:           var(--parchment-100);
  --bg-elevated:  #FFFFFF;
  --bg-sunken:    var(--parchment-200);
  --bg-inverse:   var(--ink-900);
  --bg-tint:      var(--saffron-50);

  --fg-1:         var(--ink-900);
  --fg-2:         var(--ink-500);
  --fg-3:         var(--stone-500);
  --fg-muted:     var(--stone-300);
  --fg-inverse:   var(--parchment-50);
  --fg-inverse-2: rgba(250, 244, 232, 0.72);

  --brand:        var(--saffron-500);
  --brand-hover:  var(--saffron-600);
  --brand-press:  var(--saffron-700);
  --brand-soft:   var(--saffron-50);
  --accent:       var(--ochre-500);
  --accent-gold:  var(--gold-500);
  --kumkum:       var(--kumkum-500);

  --line:         rgba(28, 16, 8, 0.10);
  --line-strong:  rgba(28, 16, 8, 0.18);
  --line-soft:    rgba(28, 16, 8, 0.06);
  --line-inverse: rgba(250, 244, 232, 0.14);
  --hairline:     0.5px solid var(--line);

  --focus-ring:      0 0 0 3px rgba(232, 101, 10, 0.32);
  --focus-ring-dark: 0 0 0 3px rgba(241, 168, 98, 0.45);

  /* =========================================================
     3. TYPOGRAPHY
        Body:    Inter Tight (humanist sans)         — v2 default
        Display: Fraunces (warm contrast serif)
        Devanag: Tiro Devanagari Hindi
        Mono:    Inter (used at small sizes only)
     ========================================================= */
  --font-sans:    'Inter Tight', 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: 'Fraunces', 'Cormorant Garamond', Georgia, serif;
  --font-deva:    'Tiro Devanagari Hindi', 'Noto Serif Devanagari', serif;
  --font-mono:    'Inter', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Type scale — major-third (1.25) anchored at 16px */
  --text-2xs:  11px;
  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 16px;
  --text-md:   18px;
  --text-lg:   20px;
  --text-xl:   24px;
  --text-2xl:  30px;
  --text-3xl:  38px;
  --text-4xl:  48px;
  --text-5xl:  60px;
  --text-6xl:  76px;
  --text-7xl:  96px;

  --lh-tight:    1.04;
  --lh-display:  1.08;
  --lh-snug:     1.22;
  --lh-normal:   1.5;
  --lh-relaxed:  1.62;

  --tracking-tight:   -0.02em;
  --tracking-snug:    -0.012em;
  --tracking-normal:  0;
  --tracking-eyebrow: 0.18em;
  --tracking-caps:    0.08em;

  --w-regular:  400;
  --w-medium:   500;
  --w-semibold: 600;
  --w-bold:     700;

  /* =========================================================
     4. SPACING — 4px grid
     ========================================================= */
  --s-0:  0;
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  20px;
  --s-6:  24px;
  --s-7:  32px;
  --s-8:  40px;
  --s-9:  48px;
  --s-10: 64px;
  --s-11: 80px;
  --s-12: 96px;
  --s-13: 128px;
  --s-14: 160px;

  /* =========================================================
     5. RADII (new scale + legacy 16/22 preserved as aliases)
     ========================================================= */
  --r-xs:   4px;
  --r-sm:   6px;
  --r-md:   10px;
  --r-lg:   14px;
  --r-xl:   20px;
  --r-2xl:  28px;
  --r-full: 999px;

  /* =========================================================
     6. SHADOWS — warm-tinted, never harsh
     ========================================================= */
  --shadow-xs:    0 1px 1px rgba(28, 16, 8, 0.04), 0 1px 2px rgba(28, 16, 8, 0.04);
  --shadow-sm:    0 1px 2px rgba(28, 16, 8, 0.05), 0 2px 6px rgba(28, 16, 8, 0.05);
  --shadow-md:    0 2px 4px rgba(28, 16, 8, 0.04), 0 8px 24px rgba(28, 16, 8, 0.08);
  --shadow-lg:    0 6px 14px rgba(28, 16, 8, 0.07), 0 24px 60px rgba(28, 16, 8, 0.12);
  --shadow-xl:    0 12px 24px rgba(28, 16, 8, 0.08), 0 40px 100px rgba(28, 16, 8, 0.16);
  --shadow-ring:  inset 0 0 0 1px rgba(28, 16, 8, 0.06);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.6);

  /* =========================================================
     7. MOTION
     ========================================================= */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  --dur-instant: 80ms;
  --dur-fast:    160ms;
  --dur-base:    240ms;
  --dur-slow:    420ms;
  --dur-page:    640ms;

  /* =========================================================
     8. LAYOUT
     ========================================================= */
  --container-sm:  640px;
  --container-md:  840px;
  --container-lg:  1080px;
  --container-xl:  1240px;
  --container-2xl: 1440px;
  --gutter:        clamp(20px, 4vw, 56px);

  /* =========================================================
     9. APP CHROME — sidebar + topbar (kept from v1)
     ========================================================= */
  --sidebar-bg:          #3B0A1F;
  --sidebar-bg-hover:    #521030;
  --sidebar-active:      #6B1540;
  --sidebar-border:      rgba(250,244,232,0.08);
  --sidebar-text:        rgba(250,244,232,0.85);
  --sidebar-text-muted:  rgba(250,244,232,0.40);
  --sidebar-icon:        rgba(250,244,232,0.60);

  --sidebar-width:           248px;
  --sidebar-width-collapsed: 56px;
  --topbar-height:           64px;
  --page-max:                1280px;
  --page-pad:                40px;

  /* =========================================================
     10. LEGACY v1 ALIASES — keep existing app.css / inline
         styles working without a big-bang rename. Replace
         file-by-file as each screen is touched.
     ========================================================= */
  --parchment:    var(--parchment-100);
  --parchment-2:  var(--parchment-200);
  --parchment-3:  var(--parchment-300);
  --surface:      var(--bg-elevated);
  --surface-2:    var(--parchment-50);
  --ink:          var(--ink-900);
  --ink-2:        var(--ink-700);
  --ink-3:        #3F2E1B;
  --stone:        var(--stone-500);
  --stone-2:      #8A847E;

  --saffron:      var(--saffron-500);
  --saffron-deep: #B84F08;            /* v1 deep — between new 500/600 */
  --saffron-soft: rgba(232,101,10,.12);
  --ochre:        var(--ochre-500);
  --sandal:       #C9A96E;
  --vermillion:   #B22222;

  --verified:     var(--verified-green);
  --warning:      var(--disputed-amber);
  --danger:       #B22222;            /* v1 brighter red — keep to avoid drift */

  /* Radii aliases */
  --rad-sm:  var(--r-sm);
  --rad:     var(--r-md);
  --rad-lg:  16px;                    /* v1 kept exact — bigger than --r-lg 14px */
  --rad-xl:  22px;                    /* v1 kept exact — bigger than --r-xl 20px */
  --rad-pill: var(--r-full);

  /* Shadow aliases (1..4 mapped to xs..lg) */
  --shadow-1: var(--shadow-xs);
  --shadow-2: var(--shadow-sm);
  --shadow-3: var(--shadow-md);
  --shadow-4: var(--shadow-lg);

  /* Font aliases — note --f-body now Inter Tight (was Baloo 2) per D2 */
  --f-display: var(--font-display);
  --f-deva:    var(--font-deva);
  --f-body:    var(--font-sans);
  --f-mono:    var(--font-mono);
}

/* =========================================================
   DARK SURFACE override — used on inverted hero strips,
   sidebar, footer. Not a full app dark mode.
   ========================================================= */
.dark, [data-theme='dark']{
  --bg:           var(--ink-900);
  --bg-elevated:  #251A0F;
  --bg-sunken:    var(--ink-950);
  --bg-tint:      rgba(232, 101, 10, 0.08);
  --fg-1:         var(--parchment-50);
  --fg-2:         rgba(250, 244, 232, 0.72);
  --fg-3:         rgba(250, 244, 232, 0.52);
  --fg-muted:     rgba(250, 244, 232, 0.32);
  --line:         rgba(250, 244, 232, 0.10);
  --line-strong:  rgba(250, 244, 232, 0.18);
  --line-soft:    rgba(250, 244, 232, 0.06);
  --shadow-md:    0 4px 12px rgba(0,0,0,0.4),  0 24px 60px rgba(0,0,0,0.4);
  --shadow-lg:    0 8px 24px rgba(0,0,0,0.5),  0 40px 100px rgba(0,0,0,0.5);
}

/* =========================================================
   BASE
   ========================================================= */
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
html{-webkit-text-size-adjust:100%;}
body{
  font-family: var(--font-sans);
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-900);
  background: var(--parchment-100);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'ss01', 'cv11';
}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:500;letter-spacing:-.015em;margin:0;color:var(--fg-1);}
h1{font-size:36px;line-height:1.1;}
h2{font-size:28px;line-height:1.15;}
h3{font-size:20px;line-height:1.2;}
h4{font-size:16px;line-height:1.25;}
p{margin:0;color:var(--ink-700);}
a{color:var(--saffron-deep);text-decoration:none;}
a:hover{color:var(--ink-900);}
button{font-family:inherit;cursor:pointer;}

.deva{font-family:var(--font-deva);}
.display{font-family:var(--font-display);font-weight:500;letter-spacing:-.015em;}
.iast{font-family:var(--font-display);font-style:italic;}
.mono,code,kbd,samp{font-family:var(--font-mono);letter-spacing:.04em;}
.eyebrow{font-family:var(--font-sans);font-size:11px;letter-spacing:.20em;text-transform:uppercase;color:var(--stone-500);font-weight:500;}
.section-label{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:#8A847E;font-weight:500;}

::selection{background:var(--saffron-200);color:var(--ink-900);}
:focus-visible{outline:none;box-shadow:var(--focus-ring);border-radius:var(--r-sm);}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Scrollbar */
*::-webkit-scrollbar{width:8px;height:8px;}
*::-webkit-scrollbar-track{background:transparent;}
*::-webkit-scrollbar-thumb{background:rgba(28,16,8,.16);border-radius:99px;}
*::-webkit-scrollbar-thumb:hover{background:rgba(28,16,8,.30);}