/* ============================================================================
   SAI GUDLA — DESIGN SYSTEM FOUNDATIONS
   colors_and_type.css
   Color scale · Typography · Spacing · Radii · Shadows · Motion · Dark mode
   ----------------------------------------------------------------------------
   Brand: personal site for Sai Gudla (saidurga.me) — software & security AI engineer.
   Direction: clean, modern, abstract, motion-y. Light-first, navy ink, azure+cyan brand.
   Palette sampled from the saidurga.me logo. Fonts from Google Fonts (see @import below).
   ============================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Hanken+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* ----------------------------------------------------------------------
     COLOR — AZURE BLUE SCALE  (sampled from the saidurga.me logo)
     Brand blue ≈ #0694d7. Kept under the --blue-* names so all
     downstream tokens & cards inherit automatically.
  ---------------------------------------------------------------------- */
  --blue-50:  #ecf8fd;
  --blue-100: #cfeefb;
  --blue-200: #a6e0f7;
  --blue-300: #6fccf1;
  --blue-400: #38b3e8;
  --blue-500: #119cdd;   /* vibrant / glow */
  --blue-600: #0694d7;   /* BRAND BLUE — interactive / links */
  --blue-700: #0a78b0;
  --blue-800: #0f6090;
  --blue-900: #134e74;   /* deep azure */
  --blue-950: #103349;

  /* ----------------------------------------------------------------------
     COLOR — BRAND CYAN / TEAL  (the "s" + swoosh; sampled #04b0cd / #03c2c5)
  ---------------------------------------------------------------------- */
  --cyan-300: #6fe7ec;
  --cyan-400: #16cdd6;   /* accent glow */
  --cyan-500: #04b0cd;   /* BRAND CYAN — accent solid */
  --cyan-600: #0792aa;   /* accent deep */
  --cyan-700: #0a7488;
  --teal-500: #03c2c5;   /* brand teal-cyan */
  --teal-600: #079ba0;

  /* ----------------------------------------------------------------------
     COLOR — BRAND NAVY  (the "ai" + tagline ink; sampled #2d324e)
  ---------------------------------------------------------------------- */
  --navy:      #2d324e;  /* primary brand ink */
  --navy-deep: #232842;
  --navy-soft: #3c4366;

  /* ----------------------------------------------------------------------
     COLOR — NEUTRALS (cool slate, blue-tinted)
  ---------------------------------------------------------------------- */
  --slate-0:   #ffffff;
  --slate-50:  #f8fafc;
  --slate-100: #f1f5f9;
  --slate-200: #e2e8f0;
  --slate-300: #cbd5e1;
  --slate-400: #94a3b8;
  --slate-500: #64748b;
  --slate-600: #475569;
  --slate-700: #334155;
  --slate-800: #1e293b;
  --slate-900: #0f172a;
  --slate-950: #020617;

  /* ----------------------------------------------------------------------
     COLOR — SEMANTIC STATES
  ---------------------------------------------------------------------- */
  --success: #16a34a;
  --success-soft: #dcfce7;
  --warning: #d97706;
  --warning-soft: #fef3c7;
  --danger:  #dc2626;
  --danger-soft: #fee2e2;
  --info: var(--blue-600);
  --info-soft: var(--blue-50);

  /* ----------------------------------------------------------------------
     SEMANTIC TOKENS — LIGHT (default)
  ---------------------------------------------------------------------- */
  --bg:        #ffffff;            /* page base */
  --bg-subtle: #f7f9fc;            /* off-white, faint blue tint */
  --bg-sunken: #eef3fb;            /* sunken / tinted surface */
  --surface:   #ffffff;            /* cards, panels */
  --surface-glass: rgba(255,255,255,0.72); /* frosted nav / floating */

  --fg:   #0b1220;                 /* primary ink (near-navy black) */
  --fg-2: #475569;                 /* secondary text */
  --fg-3: #57657a;                 /* tertiary / muted */
  --fg-on-brand: #ffffff;          /* text on blue */

  --border:        #e2e8f0;        /* hairline */
  --border-strong: #cbd5e1;        /* emphasized border */

  --brand:        var(--navy);     /* primary brand ink (logo navy) */
  --brand-vivid:  var(--blue-600); /* interactive / CTA (brand blue) */
  --brand-glow:   var(--blue-500); /* glow / hover sheen */
  --accent:       var(--cyan-500); /* secondary accent (brand cyan) */
  --accent-deep:  var(--cyan-700);
  --accent-glow:  var(--cyan-400);
  --link:         var(--blue-600);

  /* Signature brand gradient — cyan → blue, as in the logomark */
  --brand-gradient: linear-gradient(115deg, var(--cyan-500) 0%, var(--blue-600) 100%);
  --brand-gradient-soft: linear-gradient(120deg, #ecfcff, #ecf8fd);

  /* Decorative aurora / mesh stops (use at low opacity) */
  --aurora-1: var(--blue-400);
  --aurora-2: var(--cyan-400);
  --aurora-3: var(--cyan-300);

  /* Dot-grid texture color */
  --grid-dot: rgba(45, 50, 78, 0.10);

  /* Hero section background glowing auroras */
  --hero-glow-1: rgba(22, 205, 214, 0.04);
  --hero-glow-2: rgba(56, 179, 232, 0.04);

  /* ----------------------------------------------------------------------
     TYPOGRAPHY — FAMILIES
  ---------------------------------------------------------------------- */
  --font-display: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
  --font-body:    'Hanken Grotesk', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

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

  /* TYPE SCALE (fluid-ready px values) */
  --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:  62px;
  --text-6xl:  80px;

  --leading-tight: 1.05;
  --leading-snug:  1.2;
  --leading-normal:1.5;
  --leading-relaxed:1.7;

  --tracking-tight: -0.02em;
  --tracking-normal: 0em;
  --tracking-wide:  0.04em;
  --tracking-mono:  0.12em;   /* uppercase mono eyebrows */

  /* ----------------------------------------------------------------------
     SPACING — 4px base
  ---------------------------------------------------------------------- */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* ----------------------------------------------------------------------
     RADII
  ---------------------------------------------------------------------- */
  --radius-xs:  4px;
  --radius-sm:  6px;
  --radius-md:  10px;
  --radius-lg:  16px;
  --radius-xl:  24px;
  --radius-2xl: 32px;
  --radius-full: 9999px;

  /* ----------------------------------------------------------------------
     SHADOWS — soft, cool-tinted (blue/slate, never pure black)
  ---------------------------------------------------------------------- */
  --shadow-xs:  0 1px 2px rgba(15, 23, 42, 0.06);
  --shadow-sm:  0 2px 6px rgba(15, 23, 42, 0.07);
  --shadow-md:  0 8px 24px rgba(15, 23, 42, 0.08);
  --shadow-lg:  0 18px 48px rgba(15, 23, 42, 0.12);
  --shadow-xl:  0 32px 80px rgba(15, 23, 42, 0.16);
  --shadow-glow: 0 12px 40px rgba(6, 148, 215, 0.30);   /* brand-blue lift on CTAs */
  --ring-focus: 0 0 0 3px rgba(6, 148, 215, 0.35);

  /* ----------------------------------------------------------------------
     MOTION
  ---------------------------------------------------------------------- */
  --dur-fast:   140ms;
  --dur-base:   240ms;
  --dur-slow:   420ms;
  --dur-slower: 720ms;
  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1);   /* signature soft-out */
  --ease-in-out:cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring:cubic-bezier(0.34, 1.56, 0.64, 1);/* gentle overshoot */

  /* LAYOUT */
  --maxw-prose:   68ch;
  --maxw-content: 1120px;
  --maxw-wide:    1320px;
}

/* ==========================================================================
   DARK MODE — set <html data-theme="dark"> or .theme-dark
   ========================================================================== */
[data-theme="dark"], .theme-dark {
  --bg:        #0b1020;
  --bg-subtle: #0f1628;
  --bg-sunken: #0c1322;
  --surface:   #131c30;
  --surface-glass: rgba(19, 28, 48, 0.66);

  --fg:   #eaf1fb;
  --fg-2: #9fb0cc;
  --fg-3: #94a3b8;
  --fg-on-brand: #ffffff;

  --border:        #213049;
  --border-strong: #304463;

  --brand:        #eaf1fb;          /* ink reads light on dark */
  --brand-vivid:  var(--blue-400);  /* brighter azure for contrast */
  --brand-glow:   var(--cyan-400);
  --accent:       var(--cyan-400);
  --accent-deep:  var(--cyan-500);
  --accent-glow:  var(--cyan-300);
  --link:         var(--blue-300);

  --aurora-1: #0a78b0;
  --aurora-2: #0a7488;
  --aurora-3: #134e74;
  --grid-dot: rgba(56, 179, 232, 0.16);
  --hero-glow-1: rgba(22, 205, 214, 0.10);
  --hero-glow-2: rgba(56, 179, 232, 0.10);

  --shadow-xs:  0 1px 2px rgba(0,0,0,0.4);
  --shadow-sm:  0 2px 6px rgba(0,0,0,0.45);
  --shadow-md:  0 8px 24px rgba(0,0,0,0.5);
  --shadow-lg:  0 18px 48px rgba(0,0,0,0.6);
  --shadow-xl:  0 32px 80px rgba(0,0,0,0.66);
  --shadow-glow:0 12px 40px rgba(6, 148, 215, 0.45);
  --info-soft: rgba(6,148,215,0.16);
}

/* ==========================================================================
   SEMANTIC ELEMENT STYLES — opt in by importing this file
   ========================================================================== */
.ds-h1, h1.ds {
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  font-size: var(--text-5xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
}
.ds-h2, h2.ds {
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  font-size: var(--text-3xl);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
}
.ds-h3, h3.ds {
  font-family: var(--font-display);
  font-weight: var(--w-semibold);
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
  color: var(--fg);
}
.ds-eyebrow {
  font-family: var(--font-mono);
  font-weight: var(--w-medium);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--brand-vivid);
}
.ds-body, p.ds {
  font-family: var(--font-body);
  font-weight: var(--w-regular);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--fg-2);
}
.ds-lead {
  font-family: var(--font-body);
  font-weight: var(--w-regular);
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--fg-2);
}
.ds-mono, code.ds {
  font-family: var(--font-mono);
  font-size: 0.92em;
  color: var(--brand);
}
.ds-link {
  color: var(--link);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}
.ds-link:hover { color: var(--brand-glow); }