/* ============================================================
   DHARMPRENEURSHIP DESIGN SYSTEM — CSS Custom Properties
   ============================================================ */

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

/* ============================================================
   COLOR TOKENS
   ============================================================ */

:root {
  /* Brand */
  --color-primary:     #17171c;
  --color-ink:         #212121;

  /* Product Surfaces */
  --color-deep-green:  #003c33;

  /* Canvas & Light Surfaces */
  --color-canvas:      #ffffff;
  --color-soft-stone:  #eeece7;

  /* On-Color Text */
  --color-on-dark:     #ffffff;

  /* Rules & Borders */
  --color-hairline:    #d9d9dd;
  --color-card-border: #f2f2f2;

  /* Text Hierarchy */
  --color-muted:       #93939f;
  --color-body-muted:  #616161;

  /* Actions & Accents */
  --color-action-blue: #1863dc;
  --color-magenta:     #C71585;
  --color-coral:       #ff7759;
  --color-coral-soft:  #ffad9b;

  /* Gradients */
  --gradient-accent: linear-gradient(to left, #1863dc, #C71585, #ff7759);
  --glass-hi:        rgba(255, 255, 255, 0.30);

  /* On-Dark Text Scale */
  --text-on-dark:      #ffffff;
  --text-nav:          rgba(255, 255, 255, 0.88);
  --text-near-white:   rgba(255, 255, 255, 0.90);
  --text-para-on-dark: rgba(255, 255, 255, 0.80);
}

/* ============================================================
   TYPOGRAPHY TOKENS
   ============================================================ */

:root {
  /* Font families */
  --font-serif:   'Sentient', serif;
  --font-display: 'Space Grotesk', 'Inter', ui-sans-serif, system-ui, sans-serif;
  --font-ui:      'Inter', 'Arial', ui-sans-serif, system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', 'Courier New', ui-monospace, monospace;

  /* Type scale */
  --fs-hero:        96px;
  --fs-section-h:   48px;
  --fs-card-h:      32px;
  --fs-feature-h:   24px;
  --fs-body-lg:     18px;
  --fs-body:        16px;
  --fs-button:      14px;
  --fs-caption:     14px;
  --fs-mono:        14px;
  --fs-micro:       12px;

  /* Line heights */
  --lh-section-h: 1.2;
  --lh-card-h:    1.2;
  --lh-body-lg:   1.4;
  --lh-body:      1.5;
  --lh-mono:      1.4;
  --lh-micro:     1.4;

  /* Letter spacing */
  --ls-section-h: -0.48px;
  --ls-card-h:    -0.32px;
  --ls-mono:       0.28px;
}

/* ============================================================
   RADIUS TOKENS
   ============================================================ */

:root {
  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:   16px;
  --radius-lg:   22px;
  --radius-xl:   30px;
  --radius-full: 9999px;
}

/* ============================================================
   BASE RESETS
   ============================================================ */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family:             var(--font-ui);
  font-size:               var(--fs-body);
  line-height:             var(--lh-body);
  color:                   var(--color-ink);
  background-color:        var(--color-canvas);
  -webkit-font-smoothing:  antialiased;
  text-rendering:          optimizeLegibility;
}

h1 { font-family: var(--font-display); font-size: var(--fs-hero);      font-weight: 400; line-height: 1; }
h2 { font-family: var(--font-ui);      font-size: var(--fs-section-h); font-weight: 400; line-height: var(--lh-section-h); letter-spacing: var(--ls-section-h); }
h3 { font-family: var(--font-ui);      font-size: var(--fs-card-h);    font-weight: 400; line-height: var(--lh-card-h);    letter-spacing: var(--ls-card-h); }
h4 { font-family: var(--font-ui);      font-size: var(--fs-feature-h); font-weight: 400; }
p  { font-family: var(--font-ui);      font-size: var(--fs-body);      font-weight: 400; line-height: var(--lh-body); }

a {
  color:           var(--color-action-blue);
  text-decoration: underline;
  text-underline-offset: 2px;
}

code, pre {
  font-family: var(--font-mono);
  font-size:   var(--fs-mono);
}