/* Hieroglyph fonts (matching TLA: https://thesaurus-linguae-aegyptiae.de/lemma/176860) */
@font-face {
  font-family: EgyptianHiero;
  font-style: normal;
  font-display: swap;
  src: url('../fonts/EgyptianHiero3.03b.woff') format('woff');
}

@font-face {
  font-family: UniHieroglyphica;
  font-style: normal;
  font-display: swap;
  src: url('../fonts/UniHieroglyphica-PUA-v18.0-2025.ttf') format('truetype');
}

/**
 * TheSu XML Presentation Website - Design System
 * Agent 1: Design & Visual Identity
 * 
 * This file contains all CSS custom properties (design tokens) for the website.
 * Import this file first, then import components.css for component styles.
 */

/* ============================================
   CSS CUSTOM PROPERTIES (DESIGN TOKENS)
   ============================================ */

:root {
  /* ============================================
     COLOR PALETTE - SEMANTIC COLORS
     ============================================ */
  
  /* Theses (Green) - Growth & Assertion */
  --color-thesis-primary: #10b981;      /* emerald-500 - Main actions, primary CTAs */
  --color-thesis-light: #d1fae5;         /* emerald-100 - Backgrounds, highlights */
  --color-thesis-medium: #059669;         /* emerald-600 - Hover states, emphasis */
  --color-thesis-dark: #047857;          /* emerald-700 - Text on light backgrounds */
  --color-thesis-variant: #6ee7b7;       /* emerald-300 - Secondary elements */
  
  /* Supports (Blue) - Context & Information */
  --color-support-primary: #3b82f6;     /* blue-500 - Links, secondary actions */
  --color-support-light: #dbeafe;        /* blue-100 - Backgrounds, subtle highlights */
  --color-support-medium: #2563eb;       /* blue-600 - Hover states, active links */
  --color-support-dark: #1e40af;         /* blue-700 - Text on light backgrounds */
  --color-support-implicit: #e0f2fe;     /* blue-50 - Subtle backgrounds */
  
  /* Propositions (Purple) - Abstraction & Connection */
  --color-proposition-primary: #8b5cf6;   /* violet-500 - Abstract concepts, connections */
  --color-proposition-light: #ede9fe;    /* violet-100 - Backgrounds, highlights */
  --color-proposition-medium: #7c3aed;   /* violet-600 - Hover states, emphasis */
  --color-proposition-dark: #6d28d9;     /* violet-700 - Text on light backgrounds */
  
  /* Contextual (Warm Neutral) - Background & Framing */
  --color-contextual-primary: #f59e0b;   /* amber-500 - Contextual information */
  --color-contextual-light: #fef3c7;     /* amber-100 - Backgrounds, subtle highlights */
  --color-contextual-medium: #d97706;    /* amber-600 - Hover states */
  --color-contextual-muted: #fbbf24;     /* amber-400 - Secondary contextual elements */
  
  /* Accent (Orange) - Call-to-Action & Highlights */
  --color-accent-primary: #f97316;       /* orange-500 - CTAs, important notices */
  --color-accent-light: #ffedd5;         /* orange-100 - Backgrounds, highlights */
  --color-accent-medium: #ea580c;        /* orange-600 - Hover states */
  --color-accent-bright: #fb923c;        /* orange-400 - Attention-grabbing elements */
  
  /* Neutral Palette (Modern Grays) */
  --color-bg-white: #ffffff;              /* Primary background */
  --color-bg-off-white: #f9fafb;          /* gray-50 - Secondary backgrounds */
  --color-bg-subtle: #f3f4f6;            /* gray-100 - Section backgrounds, cards */
  
  --color-text-primary: #111827;          /* gray-900 - Main text, high contrast */
  --color-text-secondary: #4b5563;       /* gray-600 - Secondary text, captions */
  --color-text-tertiary: #9ca3af;         /* gray-400 - Disabled, subtle text */
  --color-text-inverse: #ffffff;          /* Text on dark backgrounds */
  
  --color-border-subtle: #e5e7eb;         /* gray-200 - Light borders, dividers */
  --color-border-medium: #d1d5db;        /* gray-300 - Standard borders */
  --color-border-strong: #9ca3af;         /* gray-400 - Emphasis borders */
  
  /* Implicit/Secondary States */
  --color-implicit-bg: #f9fafb;           /* gray-50 - Implicit element backgrounds */
  --color-implicit-border: #9ca3af;      /* gray-400 - Dashed borders for implicit */
  --color-implicit-text: #6b7280;         /* gray-500 - Implicit element text */
  
  /* ============================================
     TYPOGRAPHY
     ============================================ */
  
  /* Font Families */
  --font-heading: 'Space Grotesk', 'Manrope', 'Outfit', 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body: 'Inter', 'DM Sans', 'Work Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-code: 'JetBrains Mono', 'Fira Code', 'IBM Plex Mono', 'Source Code Pro', 'Courier New', monospace;
  --font-hieroglyphs: EgyptianHiero, UniHieroglyphica;
  
  /* Font Sizes */
  --font-size-h1: 2.5rem;                 /* 40px - Page titles */
  --font-size-h2: 2rem;                   /* 32px - Section titles */
  --font-size-h3: 1.5rem;                 /* 24px - Subsection titles */
  --font-size-h4: 1.25rem;                /* 20px - Card titles */
  --font-size-h5: 1.125rem;               /* 18px - Sub-card titles */
  --font-size-lg: 1.125rem;               /* 18px - Large text */
  --font-size-body: 1rem;                 /* 16px - Base text */
  --font-size-small: 0.875rem;            /* 14px - Captions, metadata */
  --font-size-xs: 0.75rem;                /* 12px - Extra small text */
  --font-size-xl: 1.25rem;                /* 20px - Extra large text */
  
  /* Font Weights */
  --font-weight-bold: 700;                 /* Main headings, strong emphasis */
  --font-weight-semibold: 600;            /* Subheadings, card titles */
  --font-weight-medium: 500;               /* Buttons, navigation items */
  --font-weight-regular: 400;              /* Body text, standard content */
  --font-weight-light: 300;                /* Secondary text, captions (use sparingly) */
  
  /* Line Heights */
  --line-height-tight: 1.2;                /* Headings */
  --line-height-normal: 1.5;              /* Body text */
  --line-height-relaxed: 1.75;             /* Long-form content */
  
  /* Letter Spacing */
  --letter-spacing-tight: -0.02em;        /* Headings (tech aesthetic) */
  --letter-spacing-normal: 0;             /* Body text */
  --letter-spacing-wide: 0.05em;          /* Uppercase, labels */
  
  /* ============================================
     SPACING SYSTEM (8px/16px Grid)
     ============================================ */
  
  --spacing-xs: 0.25rem;                  /* 4px */
  --spacing-sm: 0.5rem;                   /* 8px */
  --spacing-md: 1rem;                     /* 16px */
  --spacing-lg: 1.5rem;                   /* 24px */
  --spacing-xl: 2rem;                     /* 32px */
  --spacing-2xl: 3rem;                    /* 48px */
  --spacing-3xl: 4rem;                    /* 64px */
  --spacing-4xl: 6rem;                    /* 96px */
  
  /* ============================================
     BORDERS & RADIUS
     ============================================ */
  
  --border-width-thin: 1px;
  --border-width-medium: 2px;
  --border-width-thick: 3px;
  --border-width-emphasis: 4px;
  
  --border-radius-sm: 0.375rem;           /* 6px */
  --border-radius-md: 0.5rem;             /* 8px */
  --border-radius-lg: 0.75rem;            /* 12px */
  --border-radius-xl: 1rem;               /* 16px */
  --border-radius-2xl: 1.5rem;            /* 24px */
  --border-radius-full: 9999px;           /* Fully rounded (pill shape) */
  
  /* ============================================
     SHADOWS & ELEVATION
     ============================================ */
  
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 1px 3px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 4px 6px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 10px 15px rgba(0, 0, 0, 0.1);
  --shadow-2xl: 0 20px 25px rgba(0, 0, 0, 0.1);
  
  /* Semantic color shadows (for glow effects) */
  --shadow-thesis: 0 0 20px rgba(16, 185, 129, 0.3);
  --shadow-support: 0 0 20px rgba(59, 130, 246, 0.3);
  --shadow-proposition: 0 0 20px rgba(139, 92, 246, 0.3);
  --shadow-accent: 0 0 20px rgba(249, 115, 22, 0.3);
  
  /* ============================================
     TRANSITIONS & ANIMATIONS
     ============================================ */
  
  --transition-fast: 150ms ease-in-out;
  --transition-base: 200ms ease-in-out;
  --transition-slow: 300ms ease-in-out;
  --transition-slower: 500ms ease-in-out;
  
  /* ============================================
     Z-INDEX LAYERS
     ============================================ */
  
  --z-index-background: 1;                /* Background network graphics */
  --z-index-base: 10;                    /* Main content */
  --z-index-dropdown: 100;               /* Dropdown menus */
  --z-index-sticky: 200;                 /* Sticky headers */
  --z-index-modal: 300;                  /* Modal dialogs */
  --z-index-tooltip: 400;                /* Tooltips */
  
  /* ============================================
     RESPONSIVE BREAKPOINTS
     ============================================ */
  
  --breakpoint-sm: 640px;                 /* Small tablets */
  --breakpoint-md: 768px;                 /* Tablets */
  --breakpoint-lg: 1024px;                /* Desktops */
  --breakpoint-xl: 1280px;               /* Large desktops */
  --breakpoint-2xl: 1536px;              /* Extra large desktops */
  
  /* ============================================
     NETWORK VISUALIZATION COLORS
     (Subtle versions for background networks)
     ============================================ */
  
  --network-node-opacity: 0.4;            /* 40% opacity for nodes */
  --network-edge-opacity: 0.25;           /* 25% opacity for edges */
  
  --network-thesis-color: rgba(16, 185, 129, var(--network-node-opacity));
  --network-support-color: rgba(59, 130, 246, var(--network-node-opacity));
  --network-proposition-color: rgba(139, 92, 246, var(--network-node-opacity));
  
  --network-edge-thesis: rgba(16, 185, 129, var(--network-edge-opacity));
  --network-edge-support: rgba(59, 130, 246, var(--network-edge-opacity));
  --network-edge-proposition: rgba(139, 92, 246, var(--network-edge-opacity));
  
  /* ============================================
     HIEROGLYPHIC BRANDING ELEMENTS
     ============================================ */
  
  --hieroglyph-opacity-bg: 0.2;           /* 20% - Background watermarks */
  --hieroglyph-opacity-subtle: 0.3;      /* 30% - Subtle backgrounds */
  --hieroglyph-opacity-muted: 0.4;       /* 40% - Muted dividers/visualisation page */
  --hieroglyph-opacity-accent: 0.6;      /* 60% - Accent elements */
  --hieroglyph-opacity-prominent: 0.8;    /* 80% - Featured displays */
  
  --hieroglyph-size-small: 1.5rem;        /* 24px - Subtle branding */
  --hieroglyph-size-medium: 3rem;         /* 48px - Standard display */
  --hieroglyph-size-large: 6rem;          /* 96px - Featured displays */
  --hieroglyph-size-hero: 8rem;           /* 128px - Hero section */
}

/* ============================================
   HIEROGLYPHIC UTILITIES
   ============================================ */

.hieroglyphs {
  font-family: var(--font-hieroglyphs);
  direction: ltr;
  line-height: 1;
  font-weight: normal;
  display: inline-block;
  vertical-align: middle;
  white-space: nowrap;

  /* Encourage OpenType ligatures (TLA-style composition) */
  font-variant-ligatures: contextual discretionary-ligatures common-ligatures;
  font-feature-settings: "liga" 1, "clig" 1, "calt" 1;
  text-rendering: geometricPrecision;
}

/* Increase size slightly when inline to match cap height */
p .hieroglyphs, 
li .hieroglyphs {
  font-size: 1.3em;
  vertical-align: middle;
}

/* Specific size for headings */
h3 .hieroglyphs {
  font-size: 1.1em;
}

/* Larger hieroglyphs in Symbolic Associations section */
.hieroglyph-associations h3 .hieroglyphs {
  font-size: 2.5em;
  line-height: 1.2;
  display: block;
  margin-bottom: var(--spacing-xs);
}

/* ============================================
   UNICODE HIEROGLYPH COMPONENTS
   Stacked hieroglyphs using font rendering
   ============================================ */

/* Base class for all stacked hieroglyph components */
.hiero {
  font-family: var(--font-hieroglyphs);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  line-height: 1;
  font-weight: normal;
  white-space: nowrap;
  color: var(--color-text-secondary);
  
  /* Non-selectable like images */
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  pointer-events: none;
  
  /* Text rendering for crisp hieroglyphs */
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Stacked column for vertical hieroglyph stacking */
.hiero-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 0.75;
  gap: 0;
}

/* Individual glyph in stack */
.hiero-stack .hiero-glyph {
  display: block;
  line-height: 0.85;
}

/* Determinative glyph (larger, to the right) */
.hiero-det {
  display: flex;
  align-items: center;
  line-height: 1;
}

/* === SAYING hieroglyph: 𓋭𓊃𓀁 === */
.hiero-saying {
  font-size: 48px;
  min-width: 130px;
  min-height: 70px;
  gap: 6px;
}

.hiero-saying .hiero-stack {
  font-size: 40px;
}

.hiero-saying .hiero-det {
  font-size: 68px;
}

/* === TYING hieroglyph: 𓍿𓊃𓋭 === */
.hiero-tying {
  font-size: 48px;
  min-width: 60px;
  min-height: 70px;
}

.hiero-tying .hiero-stack {
  font-size: 40px;
  line-height: 0.65;
}

.hiero-tying .hiero-stack .hiero-glyph {
  line-height: 0.7;
}

/* === COMMANDER hieroglyph: 𓋭𓊃𓅱𓀜𓀀 === */
.hiero-commander {
  font-size: 48px;
  min-width: 180px;
  min-height: 70px;
  gap: 6px;
}

.hiero-commander .hiero-stack {
  font-size: 40px;
}

.hiero-commander .hiero-det {
  font-size: 56px;
  letter-spacing: 2px;
}

/* === SIZE VARIANTS === */

/* Divider size (96px wide for saying/tying, 163px for commander) */
.hiero-divider {
  display: flex;
  margin: var(--spacing-xl) auto var(--spacing-lg);
  opacity: var(--hieroglyph-opacity-accent);
}

.hiero-divider.hiero-saying {
  min-width: 140px;
  min-height: 100px;
  gap: 8px;
}

.hiero-divider.hiero-saying .hiero-stack {
  font-size: 46px;
}

.hiero-divider.hiero-saying .hiero-det {
  font-size: 78px;
}

.hiero-divider.hiero-tying {
  min-width: 70px;
  min-height: 100px;
}

.hiero-divider.hiero-tying .hiero-stack {
  font-size: 46px;
}

.hiero-divider.hiero-commander {
  min-width: 220px;
  min-height: 100px;
  gap: 8px;
}

.hiero-divider.hiero-commander .hiero-stack {
  font-size: 46px;
}

.hiero-divider.hiero-commander .hiero-det {
  font-size: 64px;
  letter-spacing: 4px;
}

/* Page title hieroglyph */
.hiero-page-title {
  gap: 6px;
}

.hiero-page-title.hiero-saying .hiero-stack {
  font-size: 40px;
}

.hiero-page-title.hiero-saying .hiero-det {
  font-size: 68px;
}

.hiero-page-title.hiero-tying .hiero-stack {
  font-size: 40px;
}

.hiero-page-title.hiero-commander {
  gap: 6px;
}

.hiero-page-title.hiero-commander .hiero-stack {
  font-size: 40px;
}

.hiero-page-title.hiero-commander .hiero-det {
  font-size: 56px;
  letter-spacing: 4px;
}

/* Footer hieroglyph sizes */
.hiero-footer-64 {
  min-width: 90px;
  min-height: 60px;
  gap: 4px;
}

.hiero-footer-64.hiero-saying .hiero-stack {
  font-size: 28px;
}

.hiero-footer-64.hiero-saying .hiero-det {
  font-size: 48px;
}

.hiero-footer-64.hiero-tying .hiero-stack {
  font-size: 28px;
}

.hiero-footer-96 {
  min-width: 140px;
  min-height: 72px;
  gap: 5px;
}

.hiero-footer-96.hiero-commander .hiero-stack {
  font-size: 28px;
}

.hiero-footer-96.hiero-commander .hiero-det {
  font-size: 40px;
  letter-spacing: 3px;
}

/* === OPACITY VARIANTS === */
.hiero-subtle {
  opacity: var(--hieroglyph-opacity-subtle);
}

.hiero-muted {
  opacity: var(--hieroglyph-opacity-muted);
}

.hiero-accent {
  opacity: var(--hieroglyph-opacity-accent);
}

.hiero-prominent {
  opacity: var(--hieroglyph-opacity-prominent);
}

/* === COLOR VARIANTS === */
.hiero-thesis {
  color: var(--color-thesis-primary);
}

.hiero-support {
  color: var(--color-support-primary);
}

.hiero-proposition {
  color: var(--color-proposition-primary);
}

/* Dark mode support - placeholder for future implementation */
/* When dark mode is implemented, uncomment and customize:
@media (prefers-color-scheme: dark) {
  :root {
    --color-bg-white: #1a1a2e;
    --color-bg-subtle: #16213e;
    --color-text-primary: #eaeaea;
  }
}
*/