/* ============================================================
   APHINA DESIGN SYSTEM — colors_and_type.css
   Primitives + semantic tokens for type and color.
   ============================================================ */

/* ---------- Fonts ---------- */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&family=Fira+Sans:wght@300;400;500;600;700&family=Fira+Code:wght@400;500&display=swap");

:root {
  /* ---------- Brand colors (primitives) ---------- */
  --aphina-magenta: #FF1B6D;          /* primary brand */
  --aphina-magenta-600: #E00A5C;      /* hover/pressed */
  --aphina-magenta-100: #FFE4EE;      /* tint */
  --aphina-magenta-50:  #FFF1F6;      /* wash */

  --aphina-graphite: #1A1A1A;         /* near-black brand dark */
  --aphina-graphite-800: #2A2A2E;
  --aphina-graphite-600: #3F4046;

  --aphina-slate:   #65677D;          /* secondary text */
  --aphina-slate-400: #8A8C9F;
  --aphina-slate-200: #C9CAD6;

  --aphina-azure:   #0A9FDF;          /* info accent */
  --aphina-emerald: #10B981;          /* success */
  --aphina-coral:   #FF6B35;          /* warning */
  --aphina-rose:    #F43F5E;          /* danger (derived) */

  --aphina-white:   #FFFFFF;
  --aphina-paper:   #FAFAFB;          /* page bg light */
  --aphina-mist:    #F5F5F7;          /* secondary bg */
  --aphina-fog:     #ECEDF2;          /* tertiary bg */
  --aphina-line:    #E5E6EC;          /* border default */
  --aphina-hairline: rgba(26,26,26,0.08); /* 0.5px style border */

  /* ---------- Semantic color tokens ---------- */
  --color-bg:               var(--aphina-white);
  --color-bg-secondary:     var(--aphina-mist);
  --color-bg-tertiary:      var(--aphina-fog);
  --color-bg-inverse:       var(--aphina-graphite);

  --color-surface:          var(--aphina-white);
  --color-surface-raised:   var(--aphina-white);
  --color-surface-sunken:   var(--aphina-mist);

  --color-fg:               var(--aphina-graphite);  /* primary text */
  --color-fg-secondary:     var(--aphina-slate);     /* secondary text */
  --color-fg-tertiary:      var(--aphina-slate-400); /* muted/hint */
  --color-fg-inverse:       var(--aphina-white);
  --color-fg-brand:         var(--aphina-magenta);

  --color-border:           var(--aphina-line);
  --color-border-strong:    #D7D8E0;
  --color-border-hairline:  var(--aphina-hairline);
  --color-border-focus:     var(--aphina-magenta);

  --color-accent:           var(--aphina-magenta);
  --color-accent-hover:     var(--aphina-magenta-600);
  --color-accent-tint:      var(--aphina-magenta-100);
  --color-accent-wash:      var(--aphina-magenta-50);

  --color-info:    var(--aphina-azure);
  --color-success: var(--aphina-emerald);
  --color-warning: var(--aphina-coral);
  --color-danger:  var(--aphina-rose);

  /* ---------- Type families ----------
     Poppins covers display + UI chrome (buttons, badges, labels, eyebrows).
     Fira Sans covers reading content (paragraphs, helper, captions).        */
  --font-display: "Poppins", "Inter", system-ui, -apple-system, sans-serif;
  --font-ui:      "Poppins", "Inter", system-ui, -apple-system, sans-serif;
  --font-sans:    "Fira Sans", "Inter", system-ui, -apple-system, sans-serif;
  --font-mono:    "Fira Code", "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;

  /* ---------- Type scale (rem-based, 16px root) ---------- */
  --fs-display-xl: 72px;   /* hero */
  --fs-display-lg: 56px;
  --fs-display:    48px;   /* H1 */
  --fs-h2:         36px;
  --fs-h3:         28px;
  --fs-h4:         22px;
  --fs-h5:         18px;
  --fs-body-lg:    18px;
  --fs-body:       16px;
  --fs-body-sm:    14px;
  --fs-caption:    12px;
  --fs-micro:      11px;

  --lh-tight: 1.1;
  --lh-snug:  1.25;
  --lh-base:  1.5;
  --lh-relaxed: 1.6;
  --lh-loose: 1.75;

  --tracking-tight: -0.02em;
  --tracking-snug:  -0.01em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-loose:  0.12em;   /* eyebrow caps */

  /* ---------- Spacing (8px base) ---------- */
  --space-0: 0;
  --space-1: 4px;    /* xs */
  --space-2: 8px;    /* sm */
  --space-3: 12px;
  --space-4: 16px;   /* md */
  --space-5: 20px;
  --space-6: 24px;   /* lg */
  --space-8: 32px;   /* xl */
  --space-10: 40px;
  --space-12: 48px;  /* xxl */
  --space-16: 64px;  /* xxxl */
  --space-20: 80px;
  --space-24: 96px;

  /* ---------- Radii ---------- */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 24px;
  --radius-pill: 999px;

  /* ---------- Shadows / elevation ---------- */
  --shadow-xs: 0 1px 2px rgba(26,26,26,0.04);
  --shadow-sm: 0 2px 6px rgba(26,26,26,0.06), 0 1px 2px rgba(26,26,26,0.04);
  --shadow-md: 0 6px 16px rgba(26,26,26,0.08), 0 2px 4px rgba(26,26,26,0.04);
  --shadow-lg: 0 18px 40px rgba(26,26,26,0.10), 0 4px 8px rgba(26,26,26,0.04);
  --shadow-xl: 0 32px 64px rgba(26,26,26,0.14);
  --shadow-focus: 0 0 0 3px rgba(255,27,109,0.25);
  --shadow-inner: inset 0 1px 0 rgba(255,255,255,0.6);

  /* ---------- Motion ---------- */
  --ease-standard: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-emphasized: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 320ms;

  /* ---------- Layout ---------- */
  --container-max: 1200px;
  --container-pad: 24px;
}

/* ============================================================
   Semantic type styles — use these directly via classnames OR
   match the tag selectors below (h1..h6, p, code, etc).
   ============================================================ */

html { color: var(--color-fg); background: var(--color-bg); }
body { font-family: var(--font-sans); font-size: var(--fs-body); line-height: var(--lh-relaxed); -webkit-font-smoothing: antialiased; }

/* Canonical scale from aphina_design_system_with_fonts.html.
   Headings: Poppins; pixel-based letter-spacing (negative tightens display).
   Body:    Fira Sans; small positive letter-spacing for legibility.        */

h1, .t-display {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  line-height: 1.2;
  letter-spacing: -0.5px;
  font-weight: 700;
  color: var(--color-fg);
  margin: 0 0 0.5em;
}

h2, .t-h2 {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  line-height: 1.3;
  letter-spacing: -0.3px;
  font-weight: 700;
  margin: 0 0 0.5em;
}

h3, .t-h3 {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  line-height: 1.4;
  letter-spacing: -0.2px;
  font-weight: 600;
  margin: 0 0 0.5em;
}

h4, .t-h4 {
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  line-height: 1.35;
  font-weight: 600;
  margin: 0 0 0.5em;
}

h5, .t-h5 {
  font-family: var(--font-display);
  font-size: var(--fs-h5);
  line-height: 1.4;
  font-weight: 600;
  margin: 0 0 0.5em;
}

.t-eyebrow {
  font-family: var(--font-ui);
  font-size: var(--fs-caption);
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--color-fg-brand);
}

p, .t-body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0.3px;
  color: var(--color-fg);
}

.t-body-lg {
  font-family: var(--font-sans);
  font-size: var(--fs-body-lg);
  line-height: 1.6;
  letter-spacing: 0.2px;
}

.t-small, small {
  font-family: var(--font-sans);
  font-size: var(--fs-body-sm);
  color: var(--color-fg-secondary);
  line-height: 1.5;
  letter-spacing: 0.2px;
}

.t-caption {
  font-family: var(--font-sans);
  font-size: var(--fs-caption);
  color: var(--color-fg-secondary);
  font-weight: 500;
  letter-spacing: 0.1px;
}

/* UI chrome — Poppins. Match the canonical reference. */
.t-label, .t-button {
  font-family: var(--font-ui);
  font-weight: 600;
}

.t-label {
  font-size: var(--fs-caption);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--color-fg-secondary);
}

code, kbd, samp, .t-mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--color-bg-secondary);
  padding: 1px 6px;
  border-radius: var(--radius-sm);
}

a {
  color: var(--color-fg-brand);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-standard);
}
a:hover { color: var(--color-accent-hover); }