/* ============================================================
   CHINMAYA DESIGN SYSTEM — Core Tokens
   Editorial / sunset palette + PP Editorial Old × Inter pairing
   ============================================================ */

/* ---- Fonts (Google Fonts substitutions; see README for swaps) ---- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&family=Cormorant+Garamond:wght@400;500&display=swap');

:root {
  /* ============================================================
     COLORS
     ============================================================ */

  /* --- Brand & Accent --- */
  --color-primary:           #ED6A2F;  /* Mistral-style saturated orange — primary CTA */
  --color-primary-deep:      #C5501F;  /* Pressed / emphasis */
  --color-on-primary:        #FFFFFF;

  --color-sunshine-300:      #FFD08A;  /* Atmospheric light orange-yellow */
  --color-sunshine-500:      #FFAA5C;  /* Mid sunset orange */
  --color-sunshine-700:      #F58634;  /* Saturated gradient mid stop */
  --color-sunshine-800:      #E26020;  /* Deep sunset stop */
  --color-sunshine-900:      #B83E10;  /* Deepest sunset orange */

  --color-yellow-saturated:  #FFC247;  /* Pure brand yellow — sunset stripe */
  --color-block-5:           #FFE07A;  /* Light yellow spectrum stop */
  --color-block-6:           #FFB347;  /* Mid yellow */
  --color-block-7:           #E76A1B;  /* Deep orange */

  /* --- Cream / Neutral Warm --- */
  --color-cream:             #F8EFD6;  /* Form panel + feature card surface */
  --color-cream-soft:        #FBF6E6;  /* Lighter cream */
  --color-cream-deeper:      #F0E0AE;  /* Tag chips */
  --color-beige-deep:        #E5D6A8;  /* 1px borders on cream surfaces */
  --color-footer-cream:      #F4EAD0;

  /* --- Surface --- */
  --color-canvas:            #FFFFFF;
  --color-surface:           #FAF8F4;
  --color-surface-cream:     #F8EFD6;
  --color-surface-cream-soft:#FBF6E6;
  --color-surface-code:      #14110D;
  --color-hairline:          #E8E4DC;
  --color-hairline-soft:     #EFEBE3;
  --color-hairline-strong:   #C9C2B4;

  /* --- Text --- */
  --color-ink:               #14110D;
  --color-ink-tint:           #2A241B;
  --color-charcoal:          #3A332A;
  --color-slate:             #5A5246;
  --color-steel:             #7A7264;
  --color-stone:             #9A9486;
  --color-muted:             #B8B1A1;
  --color-on-dark:           #FFFFFF;
  --color-on-dark-muted:     rgba(255, 255, 255, 0.62);
  --color-on-cream:          #14110D;

  /* --- Semantic --- */
  --color-link:              #ED6A2F;

  /* ============================================================
     TYPOGRAPHY — Families
     ============================================================ */
  --font-display: 'Cormorant Garamond', 'PP Editorial Old', 'Times New Roman', Georgia, serif;
  --font-ui:      'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;

  /* ============================================================
     TYPOGRAPHY — Scale (matches DESIGN.md tokens)
     ============================================================ */
  --type-hero-display-size:   84px;
  --type-hero-display-lh:     1.05;
  --type-hero-display-ls:    -1.5px;

  --type-display-lg-size:     64px;
  --type-display-lg-lh:       1.10;
  --type-display-lg-ls:      -1px;

  --type-h1-size:             52px;
  --type-h1-lh:               1.15;
  --type-h1-ls:              -0.5px;

  --type-stat-display-size:   56px;
  --type-stat-display-lh:     1.10;
  --type-stat-display-ls:    -1px;

  --type-h2-size:             36px;
  --type-h2-lh:               1.20;
  --type-h2-ls:              -0.5px;

  --type-h3-size:             28px;
  --type-h3-lh:               1.25;

  --type-h4-size:             22px;
  --type-h4-lh:               1.30;

  --type-h5-size:             18px;
  --type-h5-lh:               1.40;

  --type-subtitle-size:       18px;
  --type-subtitle-lh:         1.50;

  --type-body-md-size:        16px;
  --type-body-md-lh:          1.55;

  --type-body-sm-size:        14px;
  --type-body-sm-lh:          1.50;

  --type-caption-size:        13px;
  --type-caption-lh:          1.40;

  --type-micro-size:          12px;
  --type-micro-uppercase-size: 11px;
  --type-micro-uppercase-ls:  1px;

  --type-button-md-size:      14px;
  --type-button-md-lh:        1.30;

  --type-code-md-size:        14px;
  --type-code-md-lh:          1.50;

  /* ============================================================
     SPACING — 4px base / 8px primary increment
     ============================================================ */
  --space-xxs:        4px;
  --space-xs:         8px;
  --space-sm:        12px;
  --space-md:        16px;
  --space-lg:        20px;
  --space-xl:        24px;
  --space-xxl:       32px;
  --space-xxxl:      40px;
  --space-section-sm: 48px;
  --space-section:    64px;
  --space-section-lg: 96px;
  --space-hero:      120px;

  /* ============================================================
     RADII
     ============================================================ */
  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius-md:   8px;
  --radius-lg:  12px;
  --radius-xl:  16px;
  --radius-xxl: 20px;
  --radius-full: 9999px;

  /* ============================================================
     ELEVATION
     ============================================================ */
  --shadow-0: none;
  --shadow-1: 0 1px 2px 0 rgba(0, 0, 0, 0.04);
  --shadow-2: 0 4px 12px 0 rgba(0, 0, 0, 0.04);
  --shadow-3: 0 12px 24px -4px rgba(0, 0, 0, 0.08);
  --shadow-4: 0 16px 48px -8px rgba(0, 0, 0, 0.12);

  /* ============================================================
     GRADIENT — Sunset stripe (THE brand signature)
     ============================================================ */
  --gradient-sunset-stripe: linear-gradient(
    90deg,
    var(--color-primary)         0%,
    var(--color-sunshine-700)   28%,
    var(--color-sunshine-500)   52%,
    var(--color-yellow-saturated) 76%,
    var(--color-cream)         100%
  );

  --gradient-hero-sky: linear-gradient(
    180deg,
    #2B1A10  0%,
    #6A2E14 28%,
    #C24A1A 58%,
    #F58634 78%,
    #FFC247 100%
  );

  /* ============================================================
     CONTAINER
     ============================================================ */
  --container-max: 1280px;
  --container-gutter: 32px;
}

/* ============================================================
   SEMANTIC HELPERS — Tag-level defaults
   ============================================================ */
body {
  font-family: var(--font-ui);
  font-size: var(--type-body-md-size);
  line-height: var(--type-body-md-lh);
  color: var(--color-ink);
  background: var(--color-canvas);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 { color: var(--color-ink); margin: 0; }

.t-hero-display { font-family: var(--font-display); font-weight: 400; font-size: var(--type-hero-display-size); line-height: var(--type-hero-display-lh); letter-spacing: var(--type-hero-display-ls); }
.t-display-lg  { font-family: var(--font-display); font-weight: 400; font-size: var(--type-display-lg-size);  line-height: var(--type-display-lg-lh);  letter-spacing: var(--type-display-lg-ls); }
.t-h1          { font-family: var(--font-display); font-weight: 400; font-size: var(--type-h1-size);          line-height: var(--type-h1-lh);          letter-spacing: var(--type-h1-ls); }
.t-stat        { font-family: var(--font-display); font-weight: 400; font-size: var(--type-stat-display-size); line-height: var(--type-stat-display-lh); letter-spacing: var(--type-stat-display-ls); }
.t-h2          { font-family: var(--font-ui); font-weight: 500; font-size: var(--type-h2-size); line-height: var(--type-h2-lh); letter-spacing: var(--type-h2-ls); }
.t-h3          { font-family: var(--font-ui); font-weight: 500; font-size: var(--type-h3-size); line-height: var(--type-h3-lh); }
.t-h4          { font-family: var(--font-ui); font-weight: 500; font-size: var(--type-h4-size); line-height: var(--type-h4-lh); }
.t-h5          { font-family: var(--font-ui); font-weight: 500; font-size: var(--type-h5-size); line-height: var(--type-h5-lh); }
.t-subtitle    { font-family: var(--font-ui); font-weight: 400; font-size: var(--type-subtitle-size); line-height: var(--type-subtitle-lh); }
.t-body        { font-family: var(--font-ui); font-weight: 400; font-size: var(--type-body-md-size); line-height: var(--type-body-md-lh); }
.t-body-medium { font-family: var(--font-ui); font-weight: 500; font-size: var(--type-body-md-size); line-height: var(--type-body-md-lh); }
.t-body-sm     { font-family: var(--font-ui); font-weight: 400; font-size: var(--type-body-sm-size); line-height: var(--type-body-sm-lh); }
.t-body-sm-medium { font-family: var(--font-ui); font-weight: 500; font-size: var(--type-body-sm-size); line-height: var(--type-body-sm-lh); }
.t-caption     { font-family: var(--font-ui); font-weight: 400; font-size: var(--type-caption-size); line-height: var(--type-caption-lh); color: var(--color-steel); }
.t-caption-bold{ font-family: var(--font-ui); font-weight: 600; font-size: var(--type-caption-size); line-height: var(--type-caption-lh); }
.t-micro       { font-family: var(--font-ui); font-weight: 500; font-size: var(--type-micro-size); line-height: var(--type-caption-lh); }
.t-eyebrow     { font-family: var(--font-ui); font-weight: 600; font-size: var(--type-micro-uppercase-size); letter-spacing: var(--type-micro-uppercase-ls); text-transform: uppercase; color: var(--color-steel); }
.t-button      { font-family: var(--font-ui); font-weight: 500; font-size: var(--type-button-md-size); line-height: var(--type-button-md-lh); }
.t-code        { font-family: var(--font-mono); font-weight: 400; font-size: var(--type-code-md-size); line-height: var(--type-code-md-lh); }