/* ============================================================
   Spirit On — Design System
   colors_and_type.css
   Mentoria Tech & Mind | Renatha Negreiros
   Font: Roboto (brand) → Helvetica Neue / Arial fallback
   ============================================================ */

/* ── Brand Fonts ─────────────────────────────────────── */
@font-face {
  font-family: 'Roboto';
  src: url('fonts/Roboto-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Roboto';
  src: url('fonts/Roboto-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Roboto';
  src: url('fonts/Roboto-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* ── Base Tokens ─────────────────────────────────────── */
:root {

  /* Purple scale */
  --purple-900: #3A0F66;
  --purple-700: #5C1A8C;
  --purple-500: #8B3FBF;
  --purple-300: #C49DE0;
  --purple-100: #F3E8FF;

  /* Gold / Accent scale */
  --gold-600:   #C49A00;
  --gold-400:   #F5C200;
  --gold-200:   #FFF0A0;
  --gold-100:   #FFFAE0;

  /* Neutrals */
  --neutral-900: #1A1A2E;
  --neutral-700: #2E2E4A;
  --neutral-600: #4A4A6A;
  --neutral-400: #8888A8;
  --neutral-300: #C0BFCC;
  --neutral-200: #E2E1EC;
  --neutral-100: #F4F4F8;
  --white:       #FFFFFF;

  /* ── Semantic Color Tokens ─── */
  --color-brand-primary:   var(--purple-700);
  --color-brand-accent:    var(--gold-400);
  --color-brand-dark:      var(--purple-900);

  --color-bg-page:         var(--white);
  --color-bg-subtle:       var(--neutral-100);
  --color-bg-hero:         var(--purple-900);
  --color-bg-card:         var(--white);

  --color-text-primary:    var(--neutral-900);
  --color-text-secondary:  var(--neutral-600);
  --color-text-muted:      var(--neutral-400);
  --color-text-on-dark:    var(--white);
  --color-text-accent:     var(--purple-700);

  --color-border:          var(--neutral-200);
  --color-border-focus:    var(--gold-400);

  --color-success:         #2D8C5C;
  --color-warning:         var(--gold-400);
  --color-error:           #C0392B;
  --color-info:            var(--purple-500);

  /* ── Spacing ─── */
  --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;

  /* ── Radius ─── */
  --radius-sm:   4px;
  --radius-md:   6px;   /* buttons */
  --radius-lg:   12px;  /* cards */
  --radius-xl:   20px;
  --radius-pill: 999px; /* badges */

  /* ── Shadows / Elevation ─── */
  --shadow-sm:    0 1px 3px rgba(58,15,102,0.08), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md:    0 2px 8px rgba(92,26,140,0.10), 0 1px 2px rgba(0,0,0,0.06);
  --shadow-lg:    0 8px 24px rgba(58,15,102,0.14);
  --shadow-xl:    0 16px 48px rgba(58,15,102,0.18);
  --shadow-focus: 0 0 0 3px rgba(245,194,0,0.45);

  /* ── Typography ─── */
  --font-sans: 'Roboto', "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: "Courier New", Courier, monospace;

  /* Font weights (mapped to available Roboto cuts) */
  --fw-light:   300;
  --fw-regular: 400;
  --fw-medium:  600;  /* SemiBold */
  --fw-bold:    600;  /* SemiBold — heaviest available */

  /* Type scale — desktop */
  --text-xs:   11px;
  --text-sm:   13px;
  --text-base: 16px;
  --text-lg:   18px;
  --text-xl:   22px;
  --text-2xl:  28px;
  --text-3xl:  36px;
  --text-4xl:  48px;
  --text-5xl:  64px;

  /* Line heights */
  --lh-tight:  1.2;
  --lh-snug:   1.35;
  --lh-normal: 1.5;
  --lh-relaxed: 1.65;

  /* Letter spacing */
  --ls-tight:  -0.02em;
  --ls-normal: 0;
  --ls-wide:   0.04em;
  --ls-caps:   0.08em;

  /* ── Transitions ─── */
  --transition-fast:   100ms ease-out;
  --transition-base:   200ms ease-out;
  --transition-slow:   350ms ease-out;

  /* ── Z-Index ─── */
  --z-base:    1;
  --z-dropdown: 100;
  --z-modal:   400;
  --z-toast:   600;
}

/* ── Semantic Element Styles ─── */
body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  color: var(--color-text-primary);
  background: var(--color-bg-page);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
}

h1 {
  font-size: var(--text-5xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--color-text-primary);
}

h2 {
  font-size: var(--text-3xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
}

h3 {
  font-size: var(--text-2xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
}

h4 {
  font-size: var(--text-xl);
  font-weight: var(--fw-medium);
  line-height: var(--lh-normal);
}

h5 {
  font-size: var(--text-lg);
  font-weight: var(--fw-medium);
}

h6 {
  font-size: var(--text-base);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
}

p {
  font-size: var(--text-base);
  line-height: var(--lh-relaxed);
  color: var(--color-text-secondary);
}

small, .text-sm {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.label-caps {
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--color-text-secondary);
}

a {
  color: var(--color-brand-primary);
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

code {
  font-family: var(--font-mono);
  font-size: 0.88em;
  background: var(--purple-100);
  color: var(--purple-700);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
}