/* ============================================================
   DigiChowk Design Tokens — v1.0
   Single source of truth for the website (and reference for
   brochure/business-card alignment). See Design-Guide.md.
   ============================================================ */

:root {
  /* ---- Brand accent (Signal Orange) ---- */
  --orange:        #FF4500;
  --orange-hover:  #E63E00;
  --orange-ink:    #B5350A;                 /* AA-contrast orange for small text on light */
  --orange-100:    #FFF1EC;                 /* peach: selected light card */
  --orange-12:     rgba(255, 69, 0, .12);   /* tint fills, icon backplates */
  --orange-10:     rgba(255, 69, 0, .10);   /* faint hover wash */

  /* ---- Ink (dark) ramp ---- */
  --ink-950: #050509;
  --ink-900: #080819;   /* brand black */
  --ink-800: #0B0B16;
  --ink-700: #13131C;
  --ink-600: #181824;
  --ink-500: #1B1B27;
  --hero-gradient: linear-gradient(158deg, #15151F 0%, #0B0B14 52%, #06060C 100%);

  /* ---- Paper (warm light) ramp ---- */
  --paper:   #FDFCFB;
  --paper-2: #F3F1ED;
  --paper-3: #E9E6E1;
  --card-gradient: linear-gradient(170deg, #FDFCFB 0%, #F3F1ED 60%, #E9E6E1 100%);

  /* ---- Text ---- */
  --text-strong:        #0B0B16;
  --text-body:          #3A3A44;
  --text-muted:         rgba(8, 8, 25, .55);
  --text-on-dark:       #FFFFFF;
  --text-on-dark-2:     rgba(255, 255, 255, .70);
  --text-on-dark-muted: rgba(255, 255, 255, .55);

  /* ---- Borders & functional ---- */
  --border-light: rgba(8, 8, 25, .08);
  --border-dark:  rgba(255, 255, 255, .12);
  --positive: #1F9D55;
  --negative: #E5484D;
  --scrim: linear-gradient(180deg, transparent 0%, rgba(6, 6, 12, .70) 100%);

  /* ---- Typography ---- */
  --font-sans: "DM Sans", ui-sans-serif, system-ui, -apple-system, Arial, sans-serif;

  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;

  /* fluid sizes */
  --fs-display: clamp(40px, 6vw, 72px);
  --fs-h2:      clamp(32px, 4vw, 48px);
  --fs-h3:      28px;
  --fs-h4:      20px;
  --fs-lead:    clamp(17px, 2vw, 20px);
  --fs-body:    16px;
  --fs-small:   14px;
  --fs-eyebrow: 13px;
  --fs-stat:    clamp(32px, 4vw, 56px);
  --fs-caption: 12px;

  /* tracking */
  --tr-display: -2px;
  --tr-h2: -1px;
  --tr-h3: -.4px;
  --tr-h4: -.2px;
  --tr-eyebrow: 2.8px;
  --tr-statlabel: 1.5px;

  /* line-height */
  --lh-display: 1.02;
  --lh-h2: 1.08;
  --lh-tight: 1.15;
  --lh-body: 1.6;

  /* ---- Spacing (8px base) ---- */
  --sp-1: 4px;   --sp-2: 8px;   --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 24px;  --sp-6: 32px;  --sp-7: 48px;  --sp-8: 64px;
  --sp-9: 96px;  --sp-10: 128px;
  --section-y: clamp(56px, 9vw, 128px);
  --container: 1200px;
  --measure: 680px;

  /* ---- Radii ---- */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 20px;
  --r-pill: 999px;

  /* ---- Elevation (soft, rare) ---- */
  --shadow-sm:   0 1px 2px rgba(8, 8, 25, .06);
  --shadow-md:   0 8px 24px rgba(8, 8, 25, .08);
  --shadow-dark: 0 20px 40px rgba(0, 0, 0, .45);

  /* ---- Motion ---- */
  --ease: cubic-bezier(.2, .6, .2, 1);
  --dur-fast: 150ms;
  --dur: 300ms;
  --dur-slow: 400ms;
}

/* ============================================================
   Base type helpers (optional starter — adapt to your stack)
   ============================================================ */
body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-body);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

.eyebrow {
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: var(--orange);
}

h1, .h1 {
  font-size: var(--fs-display);
  font-weight: var(--fw-extrabold);
  letter-spacing: var(--tr-display);
  line-height: var(--lh-display);
  color: var(--text-strong);
}
h2, .h2 {
  font-size: var(--fs-h2);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tr-h2);
  line-height: var(--lh-h2);
  color: var(--text-strong);
}

/* the orange period device */
.dot { color: var(--orange); }

/* primary button */
.btn-primary {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  min-height: 44px; padding: 14px 24px;
  background: var(--orange); color: #fff;
  font-weight: var(--fw-bold); border-radius: var(--r-sm);
  border: 0; cursor: pointer;
  transition: background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.btn-primary:hover { background: var(--orange-hover); }

/* signature card */
.card {
  background: var(--paper);
  border: 1px solid var(--border-light);
  border-top: 3px solid var(--orange);
  border-radius: var(--r-md);
  padding: var(--sp-6);
  box-shadow: var(--shadow-sm);
}
.card--selected {
  border: 2px solid var(--orange);
  background: var(--orange-100);
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition-duration: .01ms !important; }
}