/* ============================================================
   TELANGANA SEO — Design Tokens
   Single source of truth. Import this in every stylesheet.
   Last updated: April 2026
   ============================================================ */

:root {

  /* ----------------------------------------------------------
     BRAND COLORS
     Primary: Deep Slate (trust, authority)
     Accent:  Saffron Gold (Telangana cultural reference, CTA)
     Surface: Near-white cream (warmth over clinical white)
  ---------------------------------------------------------- */

  /* Primary palette */
  --color-brand-900: #0D1117;   /* near-black — headings */
  --color-brand-800: #1A2332;   /* dark navy — hero backgrounds */
  --color-brand-700: #243447;   /* medium navy — section bg */
  --color-brand-600: #2E4A6B;   /* navy — hover states */
  --color-brand-500: #3B6FA5;   /* mid blue — links */
  --color-brand-400: #5A8FCC;   /* light blue — active */
  --color-brand-100: #E8F0F9;   /* pale blue — tinted bg */
  --color-brand-50:  #F3F7FD;   /* near white blue tint */

  /* Accent — Saffron Gold (all CTAs, highlights) */
  --color-accent-700: #B8620A;  /* deep gold — hover */
  --color-accent-600: #D4750F;  /* gold — border */
  --color-accent-500: #F28C1A;  /* primary accent */
  --color-accent-400: #F5A840;  /* light gold — tags */
  --color-accent-100: #FEF3E2;  /* pale gold bg */
  --color-accent-50:  #FFFAF3;  /* near-white warm */

  /* Semantic colors */
  --color-success-600: #1A7A4A;
  --color-success-100: #E8F5EE;
  --color-error-600:   #C0392B;
  --color-error-100:   #FDECEB;
  --color-neutral-700: #374151;
  --color-neutral-500: #6B7280;
  --color-neutral-300: #D1D5DB;
  --color-neutral-100: #F9FAFB;
  --color-neutral-50:  #FFFFFF;

  /* ----------------------------------------------------------
     SURFACE SYSTEM
     Light mode (default)
  ---------------------------------------------------------- */
  --surface-page:         #FAFAF8;  /* warm off-white, not pure white */
  --surface-card:         #FFFFFF;
  --surface-card-hover:   #F8F9FF;
  --surface-dark:         #0D1117;
  --surface-dark-card:    #1A2332;
  --surface-dark-raised:  #243447;

  /* ----------------------------------------------------------
     TYPOGRAPHY
     Display:  Playfair Display — editorial authority
     Body:     DM Sans — clean, highly legible
     Mono:     JetBrains Mono — technical credibility
  ---------------------------------------------------------- */

  --font-display: 'Playfair Display', Georgia, serif;
  --font-body:    'DM Sans', -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', 'Courier New', monospace;

  /* Type scale — Major Third (1.25) */
  --text-xs:   0.75rem;    /* 12px */
  --text-sm:   0.875rem;   /* 14px */
  --text-base: 1rem;       /* 16px */
  --text-lg:   1.125rem;   /* 18px */
  --text-xl:   1.25rem;    /* 20px */
  --text-2xl:  1.5rem;     /* 24px */
  --text-3xl:  1.875rem;   /* 30px */
  --text-4xl:  2.25rem;    /* 36px */
  --text-5xl:  3rem;       /* 48px */
  --text-6xl:  3.75rem;    /* 60px */
  --text-7xl:  4.5rem;     /* 72px */

  /* Line heights */
  --leading-tight:  1.2;
  --leading-snug:   1.35;
  --leading-normal: 1.5;
  --leading-relaxed:1.65;
  --leading-loose:  1.8;

  /* Font weights */
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semibold:600;
  --weight-bold:    700;

  /* Letter spacing */
  --tracking-tight:  -0.03em;
  --tracking-normal:  0;
  --tracking-wide:    0.05em;
  --tracking-wider:   0.1em;
  --tracking-widest:  0.15em;

  /* ----------------------------------------------------------
     SPACING — 4px base grid
  ---------------------------------------------------------- */
  --space-1:  0.25rem;   /* 4px  */
  --space-2:  0.5rem;    /* 8px  */
  --space-3:  0.75rem;   /* 12px */
  --space-4:  1rem;      /* 16px */
  --space-5:  1.25rem;   /* 20px */
  --space-6:  1.5rem;    /* 24px */
  --space-8:  2rem;      /* 32px */
  --space-10: 2.5rem;    /* 40px */
  --space-12: 3rem;      /* 48px */
  --space-16: 4rem;      /* 64px */
  --space-20: 5rem;      /* 80px */
  --space-24: 6rem;      /* 96px */
  --space-32: 8rem;      /* 128px */

  /* ----------------------------------------------------------
     LAYOUT
  ---------------------------------------------------------- */
  --container-sm:   640px;
  --container-md:   768px;
  --container-lg:   1024px;
  --container-xl:   1280px;
  --container-2xl:  1440px;

  --section-padding-y:   var(--space-20);  /* vertical rhythm between sections */
  --section-padding-x:   var(--space-6);   /* horizontal page gutter */

  /* ----------------------------------------------------------
     BORDERS & RADIUS
  ---------------------------------------------------------- */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  24px;
  --radius-full: 9999px;

  --border-thin:   1px solid var(--color-neutral-300);
  --border-medium: 1.5px solid var(--color-neutral-300);
  --border-accent: 1.5px solid var(--color-accent-500);
  --border-brand:  1.5px solid var(--color-brand-500);

  /* ----------------------------------------------------------
     SHADOWS
  ---------------------------------------------------------- */
  --shadow-xs:  0 1px 2px rgba(0,0,0,0.05);
  --shadow-sm:  0 2px 6px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md:  0 4px 16px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.04);
  --shadow-lg:  0 8px 32px rgba(0,0,0,0.10), 0 4px 8px rgba(0,0,0,0.06);
  --shadow-xl:  0 16px 48px rgba(0,0,0,0.12), 0 8px 16px rgba(0,0,0,0.08);
  --shadow-accent: 0 4px 20px rgba(242,140,26,0.25);
  --shadow-brand:  0 4px 20px rgba(59,111,165,0.20);

  /* ----------------------------------------------------------
     MOTION
  ---------------------------------------------------------- */
  --ease-out:      cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out:   cubic-bezier(0.45, 0, 0.55, 1);
  --ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-linear:   linear;

  --duration-fast:   150ms;
  --duration-base:   250ms;
  --duration-slow:   400ms;
  --duration-slower: 600ms;

  /* ----------------------------------------------------------
     Z-INDEX SCALE
  ---------------------------------------------------------- */
  --z-below:   -1;
  --z-base:     0;
  --z-raised:   10;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-overlay:  300;
  --z-modal:    400;
  --z-toast:    500;

}

/* ----------------------------------------------------------
   DARK MODE OVERRIDES
   Applied automatically via prefers-color-scheme
   Override manually with [data-theme="dark"] on <html>
---------------------------------------------------------- */

@media (prefers-color-scheme: dark) {
  :root {
    --surface-page:         #0D1117;
    --surface-card:         #1A2332;
    --surface-card-hover:   #243447;
    --color-neutral-700:    #E5E7EB;
    --color-neutral-500:    #9CA3AF;
    --color-neutral-300:    #374151;
    --color-neutral-100:    #1F2937;
  }
}

[data-theme="dark"] {
  --surface-page:         #0D1117;
  --surface-card:         #1A2332;
  --surface-card-hover:   #243447;
  --color-neutral-700:    #E5E7EB;
  --color-neutral-500:    #9CA3AF;
  --color-neutral-300:    #374151;
  --color-neutral-100:    #1F2937;
}