@charset "UTF-8";
/**
 * Design Tokens — 022-scienceprint
 * Theme:   Deep Teal + Soft Cream
 * Primary: #0f766e (HSL 174°, deep teal — academic precision)
 * Accent:  #f59e0b (amber — important labels, highlights)
 * Archetype: academic-precision | Font: IBM Plex Sans / Inter
 * Positioning: Premium print-ready science materials for classrooms
 */

:root {
  /* ── Primary (Deep Teal) ── */
  --site-primary:        #0f766e;
  --site-primary-hover:  #0d9488;
  --site-primary-dark:   #134e4a;
  --site-primary-light:  #f0fdfa;
  --site-primary-border: #99f6e4;

  /* ── Accent (Amber) ── */
  --site-accent:         #f59e0b;
  --site-accent-hover:   #d97706;
  --site-accent-dark:    #92400e;
  --site-accent-light:   #fffbeb;

  /* ── Semantic (standard — never change per brand) ── */
  --site-success:  #22c55e;
  --site-warning:  #f59e0b;
  --site-error:    #ef4444;

  /* ── Surfaces ── */
  --site-background:           #ffffff;
  --site-surface:              #f0fdfa;
  --site-surface-raised:       #ffffff;
  --site-background-alt:       #f0fdfa;
  --site-background-secondary: #ccfbf1;

  /* ── Text (teal-tinted neutrals for brand warmth) ── */
  --site-text:           #042f2e;
  --site-text-primary:   #134e4a;
  --site-text-secondary: #0f766e;
  --site-text-muted:     #64748b;
  --site-text-light:     #475569;
  --site-text-inverse:   #ffffff;

  /* ── Borders ── */
  --site-border:        #ccfbf1;
  --site-border-light:  #f0fdfa;
  --site-border-medium: #99f6e4;
  --site-border-dark:   #5eead4;

  /* ── Radius — Subtle personality (professional, restrained) ── */
  --radius-sm:     4px;
  --radius-md:     8px;
  --radius-lg:     12px;
  --radius-xl:     16px;
  --radius-full:   9999px;
  --radius-button: var(--radius-md);
  --radius-card:   var(--radius-lg);
  --detail-border-radius: var(--radius-lg);

  /* ── Typography ── */
  --font-heading: 'IBM Plex Sans', 'Inter', system-ui, -apple-system, sans-serif;
  --font-body:    system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:    'IBM Plex Mono', 'JetBrains Mono', 'Source Code Pro', monospace;

  /* ── Spacing (8px base) ── */
  --spacing-2xs: 2px;
  --spacing-xs:  4px;
  --spacing-sm:  8px;
  --spacing-md:  16px;
  --spacing-lg:  24px;
  --spacing-xl:  32px;
  --spacing-2xl: 48px;
  --spacing-3xl: 64px;

  /* ── Shadows (tinted with deep teal for brand warmth) ── */
  --shadow-sm: 0 1px 3px rgba(15, 118, 110, 0.06);
  --shadow-md: 0 4px 8px rgba(15, 118, 110, 0.10), 0 1px 3px rgba(0, 0, 0, 0.04);
  --shadow-lg: 0 10px 20px rgba(15, 118, 110, 0.12), 0 4px 6px rgba(0, 0, 0, 0.04);
  --shadow-xl: 0 20px 40px rgba(15, 118, 110, 0.14);

  /* ── Transitions ── */
  --dur-fast:    150ms;
  --dur-normal:  250ms;
  --dur-slow:    400ms;
  --ease-default: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:     cubic-bezier(0, 0, 0.2, 1);
  --ease-in:      cubic-bezier(0.4, 0, 1, 1);
  --ease-bounce:  cubic-bezier(0.68, -0.55, 0.265, 1.55);

  /* ── Extended tokens ── */
  --shadow-card-hover:   0 12px 28px rgba(15, 118, 110, 0.14), 0 4px 10px rgba(0, 0, 0, 0.04);
  --shadow-btn-brand:    0 4px 14px rgba(15, 118, 110, 0.30);
  --gradient-body:       linear-gradient(160deg, #f0fdfa 0%, #ffffff 50%, #fffbeb 100%);
  --gradient-hero:       linear-gradient(135deg, #ffffff 0%, #f0fdfa 60%, #fffbeb 100%);
  --gradient-hero-blob:  radial-gradient(ellipse 600px 400px at 80% 20%, rgba(15, 118, 110, 0.07) 0%, transparent 70%);
  --gradient-stat-badge: linear-gradient(135deg, #0f766e 0%, #14b8a6 100%);
  --gradient-hero-band:  linear-gradient(90deg, #0f766e 0%, #0d9488 50%, #14b8a6 100%);
  --accent-line-width:   3rem;
  --accent-line-height:  3px;

  /* ── Print-specific tokens (pt/mm units as required) ── */
  --print-text:         #000000;
  --print-border:       #333333;
  --print-border-light: #999999;
  --print-heading-size: 17pt;
  --print-body-size:    11pt;
  --print-caption-size: 9pt;
  --print-label-size:   10pt;
}

/* ═══ Dark Mode ═══ */
@media (prefers-color-scheme: dark) {
  :root {
    --site-primary:        #2dd4bf;
    --site-primary-hover:  #5eead4;
    --site-primary-dark:   #14b8a6;
    --site-primary-light:  #042f2e;
    --site-primary-border: #0f766e;

    --site-accent:         #fbbf24;
    --site-accent-hover:   #fcd34d;
    --site-accent-dark:    #d97706;
    --site-accent-light:   #451a03;

    --site-background:           #030f0d;
    --site-surface:              #081a18;
    --site-surface-raised:       #0d2420;
    --site-background-alt:       #042f2e;
    --site-background-secondary: #134e4a;

    --site-text:           #ccfbf1;
    --site-text-primary:   #f0fdfa;
    --site-text-secondary: #5eead4;
    --site-text-muted:     #94a3b8;
    --site-text-light:     #64748b;
    --site-text-inverse:   #030f0d;

    --site-border:        #134e4a;
    --site-border-light:  #042f2e;
    --site-border-medium: #0f766e;
    --site-border-dark:   #0d9488;

    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.35);
    --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.45), 0 1px 3px rgba(0, 0, 0, 0.25);
    --shadow-lg: 0 10px 20px rgba(0, 0, 0, 0.55), 0 4px 6px rgba(0, 0, 0, 0.25);
    --shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.65);
    --shadow-card-hover:   0 12px 28px rgba(0, 0, 0, 0.55), 0 4px 10px rgba(45, 212, 191, 0.12);
    --shadow-btn-brand:    0 4px 14px rgba(45, 212, 191, 0.30);
    --gradient-body:       linear-gradient(160deg, #030f0d 0%, #081a18 50%, #0d150c 100%);
    --gradient-hero:       linear-gradient(135deg, #030f0d 0%, #042f2e 60%, #081a18 100%);
    --gradient-hero-blob:  radial-gradient(ellipse 600px 400px at 80% 20%, rgba(45, 212, 191, 0.08) 0%, transparent 70%);
    --gradient-stat-badge: linear-gradient(135deg, #0f766e 0%, #0d9488 100%);
    --gradient-hero-band:  linear-gradient(90deg, #134e4a 0%, #0f766e 50%, #0d9488 100%);
  }
}