/**
 * Technera Design System — Design Tokens
 * colors_and_type.css
 * Version: 1.0 — May 2026
 */

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

/* ─────────────────────────────────────────────────────
   COLOR PRIMITIVES
───────────────────────────────────────────────────── */
:root {
  /* Brand Core */
  --color-navy:       #0B1220;
  --color-graphite:   #111827;
  --color-white:      #F8FAFC;
  --color-steel:      #64748B;
  --color-cloud:      #E2E8F0;
  --color-cyan:       #22D3EE;

  /* Extended Navy Scale */
  --color-navy-50:    #F0F4F8;
  --color-navy-100:   #D9E2ED;
  --color-navy-200:   #B3C5DA;
  --color-navy-300:   #8DA8C7;
  --color-navy-400:   #5B7A9B;
  --color-navy-500:   #2E4D6E;
  --color-navy-600:   #1A3050;
  --color-navy-700:   #0F1E36;
  --color-navy-800:   #0B1220;  /* = --color-navy */
  --color-navy-900:   #060B14;

  /* Extended Graphite Scale */
  --color-graphite-50:  #F9FAFB;
  --color-graphite-100: #F3F4F6;
  --color-graphite-200: #E5E7EB;
  --color-graphite-300: #D1D5DB;
  --color-graphite-400: #9CA3AF;
  --color-graphite-500: #6B7280;
  --color-graphite-600: #4B5563;
  --color-graphite-700: #374151;
  --color-graphite-800: #1F2937;
  --color-graphite-900: #111827;  /* = --color-graphite */

  /* Extended Cyan Scale */
  --color-cyan-50:  #ECFEFF;
  --color-cyan-100: #CFFAFE;
  --color-cyan-200: #A5F3FC;
  --color-cyan-300: #67E8F9;
  --color-cyan-400: #22D3EE;  /* = --color-cyan */
  --color-cyan-500: #06B6D4;
  --color-cyan-600: #0891B2;
  --color-cyan-700: #0E7490;
  --color-cyan-800: #155E75;
  --color-cyan-900: #164E63;

  /* ─── SEMANTIC COLORS (Light Mode) ─── */
  --bg-primary:       #F8FAFC;
  --bg-secondary:     #F0F4F8;
  --bg-tertiary:      #E2E8F0;
  --bg-inverse:       #0B1220;
  --bg-inverse-soft:  #111827;

  --fg-primary:       #0B1220;
  --fg-secondary:     #374151;
  --fg-tertiary:      #64748B;
  --fg-disabled:      #9CA3AF;
  --fg-inverse:       #F8FAFC;
  --fg-accent:        #22D3EE;

  --border-subtle:    #E2E8F0;
  --border-default:   #CBD5E1;
  --border-strong:    #94A3B8;
  --border-accent:    #22D3EE;

  --accent-primary:   #22D3EE;
  --accent-hover:     #38E3FF;
  --accent-pressed:   #06B6D4;

  /* ─── STATUS COLORS ─── */
  --color-success:   #10B981;
  --color-warning:   #F59E0B;
  --color-error:     #EF4444;
  --color-info:      #22D3EE;

  /* ─── ELEVATION / SHADOWS ─── */
  --shadow-0: none;
  --shadow-1: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-2: 0 4px 16px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.08);
  --shadow-3: 0 8px 32px rgba(0, 0, 0, 0.16), 0 4px 8px rgba(0, 0, 0, 0.10);
  --shadow-cyan: 0 0 16px rgba(34, 211, 238, 0.15);

  /* ─── BORDER RADII ─── */
  --radius-xs:  2px;
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  12px;
  --radius-xl:  16px;
  --radius-2xl: 24px;

  /* ─── SPACING SCALE (8px base) ─── */
  --space-0:  0px;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  28px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-30: 120px;

  /* ─── TRANSITIONS ─── */
  --transition-fast:   all 0.15s ease;
  --transition-base:   all 0.20s ease;
  --transition-slow:   all 0.30s ease-out;

  /* ─── Z-INDEX ─── */
  --z-base:    0;
  --z-raised:  10;
  --z-overlay: 100;
  --z-modal:   1000;
  --z-toast:   9999;
}

/* ─────────────────────────────────────────────────────
   TYPOGRAPHY PRIMITIVES
───────────────────────────────────────────────────── */
:root {
  /* Font Families */
  --font-sans:  'Inter', 'Geist', system-ui, -apple-system, sans-serif;
  --font-mono:  'IBM Plex Mono', 'Fira Code', 'Cascadia Code', monospace;

  /* Font Weights */
  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* Type Scale */
  --text-xs:   0.6875rem;  /* 11px — badges, technical tags */
  --text-sm:   0.8125rem;  /* 13px — captions, labels */
  --text-base: 1rem;       /* 16px — body copy */
  --text-lg:   1.125rem;   /* 18px — lead / body large */
  --text-xl:   1.25rem;    /* 20px — large body, small cards */
  --text-2xl:  1.5rem;     /* 24px — H3 */
  --text-3xl:  2rem;       /* 32px — H2 subheads */
  --text-4xl:  2.25rem;    /* 36px — H2 */
  --text-5xl:  3rem;       /* 48px — H1 large */
  --text-6xl:  3.5rem;     /* 56px — H1 hero */
  --text-7xl:  4.5rem;     /* 72px — display / landing hero */

  /* Line Heights */
  --lh-tight:   1.15;
  --lh-snug:    1.3;
  --lh-normal:  1.5;
  --lh-relaxed: 1.65;
  --lh-loose:   1.8;

  /* Letter Spacing */
  --ls-tight:   -0.02em;
  --ls-snug:    -0.01em;
  --ls-normal:  0em;
  --ls-wide:    0.04em;
  --ls-wider:   0.08em;   /* eyebrow / caps labels */
  --ls-widest:  0.12em;
}

/* ─────────────────────────────────────────────────────
   SEMANTIC TYPE STYLES
───────────────────────────────────────────────────── */

/* Display / Hero */
.t-display {
  font-family: var(--font-sans);
  font-size: var(--text-7xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--fg-primary);
}

h1, .t-h1 {
  font-family: var(--font-sans);
  font-size: var(--text-6xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-snug);
  color: var(--fg-primary);
}

h2, .t-h2 {
  font-family: var(--font-sans);
  font-size: var(--text-4xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-snug);
  color: var(--fg-primary);
}

h3, .t-h3 {
  font-family: var(--font-sans);
  font-size: var(--text-2xl);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  letter-spacing: 0;
  color: var(--fg-primary);
}

h4, .t-h4 {
  font-family: var(--font-sans);
  font-size: var(--text-xl);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-normal);
  color: var(--fg-primary);
}

p, .t-body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--fw-regular);
  line-height: var(--lh-relaxed);
  color: var(--fg-secondary);
}

.t-body-lg {
  font-family: var(--font-sans);
  font-size: var(--text-lg);
  font-weight: var(--fw-regular);
  line-height: var(--lh-relaxed);
  color: var(--fg-secondary);
}

.t-caption {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--fw-light);
  line-height: var(--lh-normal);
  color: var(--fg-tertiary);
}

.t-eyebrow {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--fg-tertiary);
}

.t-eyebrow-accent {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--accent-primary);
}

/* Monospace styles */
code, .t-mono {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: var(--fw-regular);
  line-height: var(--lh-normal);
  color: var(--fg-secondary);
}

.t-mono-label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-wide);
  color: var(--fg-tertiary);
}

.t-tag {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--fw-regular);
  letter-spacing: var(--ls-wide);
  color: var(--accent-primary);
}

/* ─────────────────────────────────────────────────────
   BASE RESET + GLOBAL STYLES
───────────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--lh-relaxed);
  color: var(--fg-primary);
  background-color: var(--bg-primary);
}

/* ─────────────────────────────────────────────────────
   DARK MODE SEMANTIC OVERRIDES
───────────────────────────────────────────────────── */
.dark, [data-theme="dark"] {
  --bg-primary:      #0B1220;
  --bg-secondary:    #111827;
  --bg-tertiary:     #1F2937;
  --bg-inverse:      #F8FAFC;

  --fg-primary:      #F8FAFC;
  --fg-secondary:    #CBD5E1;
  --fg-tertiary:     #94A3B8;
  --fg-disabled:     #64748B;
  --fg-inverse:      #0B1220;

  --border-subtle:   rgba(255, 255, 255, 0.06);
  --border-default:  rgba(255, 255, 255, 0.10);
  --border-strong:   rgba(255, 255, 255, 0.20);
  --border-accent:   #22D3EE;

  --shadow-1: 0 1px 3px rgba(0, 0, 0, 0.4);
  --shadow-2: 0 4px 16px rgba(0, 0, 0, 0.5);
  --shadow-3: 0 8px 32px rgba(0, 0, 0, 0.6);
}