/* ============================================
   Global Design System Foundation
   Supports: Clarity, Stack, Terminal themes
   ============================================ */

:root {
  /* Theme transition for smooth switching */
  --theme-transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;

  /* Base spacing scale (shared across themes) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;

  /* Base typography scale */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 2rem;
  --text-4xl: 2.5rem;

  /* Line heights */
  --leading-tight: 1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;
  --leading-loose: 1.75;

  /* Border radii */
  --radius-sm: 0.25rem;
  --radius-md: 0.375rem;
  --radius-lg: 0.5rem;
  --radius-xl: 0.75rem;
  --radius-2xl: 1rem;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);

  /* Container widths */
  --container-sm: 40rem;
  --container-md: 48rem;
  --container-lg: 64rem;
  --container-xl: 80rem;

  /* Default theme colors (can be overridden by theme classes) */
  --color-bg: #ffffff;
  --color-fg: #171717;
  --color-muted: #525252;
  --color-faded: #a3a3a3;
  --color-accent: #4F46E5;
  --color-accent-hover: #4338CA;
  --color-surface: #fafafa;
  --color-border: #e5e5e5;

  /* Code block colors */
  --code-bg: #1e1e1e;
  --code-fg: #d4d4d4;
}

/* Default dark mode - explicit toggle */
html.-dark-mode {
  --color-bg: #0A0A0A;
  --color-fg: #FAFAFA;
  --color-muted: #A3A3A3;
  --color-faded: #737373;
  --color-surface: #171717;
  --color-border: #404040;
  --color-accent: #818CF8;
  --color-accent-hover: #A5B4FC;
}

/* Default dark mode - system preference fallback */
@media (prefers-color-scheme: dark) {
  :root:not(.-no-dark-theme) {
    --color-bg: #0A0A0A;
    --color-fg: #FAFAFA;
    --color-muted: #A3A3A3;
    --color-faded: #737373;
    --color-surface: #171717;
    --color-border: #404040;
    --color-accent: #818CF8;
    --color-accent-hover: #A5B4FC;
  }
}

/* RTL support - use logical properties */
[dir="rtl"] {
  --text-align-start: right;
  --text-align-end: left;
}

[dir="ltr"], :root {
  --text-align-start: left;
  --text-align-end: right;
}

/* Code blocks should always be LTR (even in RTL layouts) */
pre, code,
.language-hyperscript,
.language-html,
.language-javascript,
.language-css,
.language-markup {
  direction: ltr;
  text-align: left;
}

/* ============================================
   Font Face Declarations
   ============================================ */

/* Font face declarations */
@font-face {
  font-family: 'Chicago FLF';
  src: url('/fonts/ChicagoFLF.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Gaegu';
  src: url('/fonts/Gaegu-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Gaegu';
  src: url('/fonts/Gaegu-Bold.ttf') format('truetype');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'PrintChar 21';
  src: url('/fonts/PrintChar21.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'PR Number 3';
  src: url('/fonts/PRNumber3.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'ChiKareGo2';
  src: url('/fonts/ChiKareGo2.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Geneva';
  src: url("fonts/FindersKeepers.woff") format("woff");
}
@font-face {
  font-family: 'Monaco';
  src: url("fonts/Monaco.woff") format("woff");
  src: url("fonts/Monaco.woff2") format("woff2");
}
@font-face {
  font-family: 'FA Sysfont C';
  src: url('/fonts/sysfont.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Inconsolata';
  src: url('/fonts/Inconsolata.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

/* HyperCard Theme */
:root {
  /* Classic Mac System Colors */
  --mac-black: #000000;
  --mac-white: #ffffff;
  --mac-gray: #808080;
  --mac-light-gray: #e5e5e5;
  
  /* HyperCard Window Styles */
  --window-border: 2px solid var(--mac-black);
  --window-shadow: 3px 3px 0 rgba(0, 0, 0, 0.8);
  --card-shadow: 2px 2px 0 rgba(0, 0, 0, 0.5);
  --inner-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.2);
  
  /* Typography */
  --main-font: "Chicago FLF", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --mono-font: "ChiKareGo2", monospace monospace;
  --heading-font: "Chicago FLF", system-ui, sans-serif;
  
  /* Spacing */
  --spacing-xs: 0.5rem;
  --spacing-sm: 1rem;
  --spacing-md: 1.5rem;
  --spacing-lg: 2rem;
  --spacing-xl: 3rem;
}

/* Added: content width */
.container {
  max-inline-size: clamp(var(--eff-line-length), 85vw, 1400px);
  margin-inline: auto;
  padding-inline: var(--spacing-lg, 2rem);
  width: 100%;
  box-sizing: border-box;
}

/* Base Layout */
.main-stack {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--spacing-lg);
  /* background: var(--mac-white); */
  background-color: #f4f4f4;
  background-image: radial-gradient(circle, #999999 1px, transparent 1px);
  background-size: 4px 4px;
}
/* Added: logo sizing */
.hero-logo {
  display: block;
  margin: 0 auto;
  /* Smooth scaling between 96px and 128px based on viewport */
  width: clamp(96px, 12vw, 128px);
  height: auto;
  /* Optional */
  filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.1));
}

/* Optional: Adjust size for mobile */
@media (max-width: 768px) {
  .hero-logo {
    width: clamp(80px, 10vw, 96px);
  }
}
  
/* Classic Macintosh dot grid */
.mac-grid-classic {
  /* background-color: #f4f4f4; */
  background-image: radial-gradient(circle, #999999 1px, transparent 1px);
  background-size: 4px 4px;
}

/* Subtle dot grid */
.mac-grid-subtle {
  background-color: #ffffff;
  background-image: radial-gradient(circle, #cccccc 1px, transparent 1px);
  background-size: 6px 6px;
}

/* font-weight for headings */
h1, h2, h3, h4 {
  font-family: var(--heading-font);
  font-weight: bold;
}

/* Font rendering */
body {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: geometricPrecision;
}

.title-bar {
  position: relative;
  height: 1.5rem;
  margin: 0.1rem 0;
  background: linear-gradient(var(--mac-gray) 50%, transparent 50%) content-box;
  background-size: 7% 24%;
}

.title-bar .title {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 0;
  padding: 0 0.5rem;
  background: var(--mac-white);
  border: .5px solid var(--mac-lightgray);
  border-radius: 1px;
  font: 1rem var(--heading-font);
  text-shadow: 0.5px 0.5px 0 rgba(223, 223, 223, 0.8);
} 
/* Intro Card */
.intro-card {
  padding: var(--spacing-lg);
  border: var(--window-border);
  border-radius: 8px;
  background: var(--mac-white);
  box-shadow: var(--window-shadow);
}
.intro-card h1 {
  font-family: var(--heading-font);
  font-size: 2rem;
  margin-bottom: var(--spacing-md);
  text-align: center;
}

.tagline {
  font-size: 1.2rem;
  text-align: center;
  margin-bottom: var(--spacing-lg);
}

/* Demo Box */
.demo-box {
  margin: var(--spacing-lg) 0;
  padding: var(--spacing-md);
  border: 2px solid var(--mac-black);
  border-radius: 6px;
  background: var(--mac-light-gray);
  box-shadow: var(--inner-shadow);
}

/* .demo-box pre {
  margin: var(--spacing-md) 0;
  padding: var(--spacing-md);
  border: 1px solid var(--mac-black);
  border-radius: 4px;
  background: var(--mac-white);
  font-family: var(--mono-font);
} */

/* Install Box */
.install-box {
  /* margin: var(--spacing-lg) 0; */
  padding: 2px;
  border: 3px double var(--mac-black);
  border-radius: 6px;
  background: var(--mac-white);
  text-align: center;
  overflow: hidden;
}

.install-box strong {
  font-family: var(--heading-font);
}

.install-box pre {
  /* display: inline-block;
  margin: var(--spacing-sm) 0;
  padding: var(--spacing-sm) var(--spacing-md); */
  border: 1px solid var(--mac-black);
}


/* Quick Links Enhancement */
.quick-links {
  display: flex;
  gap: var(--spacing-md);
  justify-content: center;
  margin: var(--spacing-lg) 0;
}

.quick-links .btn {
  padding: 0.5rem 1rem;
  border: 2px solid var(--mac-black);
  border-radius: 6px;
  background: var(--mac-white);
  font-family: var(--heading-font);
  text-decoration: none;
  color: var(--mac-black);
  box-shadow: 2px 2px 0 var(--mac-black);
  transition: transform 0.1s ease-in-out, box-shadow 0.1s ease-in-out;
}

.quick-links .btn:hover {
  background: var(--mac-light-gray);
}

.quick-links .btn:active {
  transform: translate(2px, 2px);
  box-shadow: none;
}
  
/* HyperCard-inspired feature cards */
.feature-card {
    background: var(--mac-white);
    border: var(--window-border);
    border-radius: 6px;
    margin-bottom: var(--spacing-md);
    box-shadow: var(--card-shadow);
}
  
/* HyperCard-style title bars */
.feature-card .title-bar {
    position: relative;
    height: 1.5rem;
    margin: 0.1rem 0;
    padding: 0.2rem 0.1rem;
      /* background-color: var(--mac-light-gray); */
    border-bottom: var(--window-border);
    border-top-left-radius: 2px;
    border-top-right-radius: 2px;
    display: block;
    user-select: none;
    overflow: hidden;
  }
  /* Striped background pattern */
/* .feature-card .title-bar::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* background-image: repeating-linear-gradient(
        90deg,
        var(--mac-light-gray) 0,
        var(--mac-light-gray) 1px,
        transparent 1px,
        transparent 4px
    ); */
    /* opacity: 0.15;
    pointer-events: none;
} */ */
  
/* Title container with inset effect */
.feature-card .title-bar .title {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    padding: 0.25rem 1.25rem;
    /* background: var(--mac-white); */
    border: 0px solid var(--mac-black);
    border-radius: 1px;
    font-family: var(--heading-font);
    font-weight: bold;
    font-size: 1.3rem;
    color: var(--mac-black);
    box-shadow: var(--inner-shadow);
    z-index: 1;
    text-align: center;
    min-width: 8rem;
    white-space: nowrap;
  }
  
  /* Responsive adjustments */
@media (max-width: 640px) {
    .feature-card .title-bar {
      height: 2.25rem;
    }
    
    .feature-card .title-bar .title {
      font-size: 1rem;
      padding: 0.2rem 1rem;
    }
  }
  
  /* High contrast mode */
  @media (prefers-contrast: high) {
    .feature-card .title-bar {
      background: var(--bg);
      border-bottom: 3px solid var(--graphical-fg);
    }
    
    .feature-card .title-bar .title {
      border: 2px solid var(--graphical-fg);
      box-shadow: none;
    }
    
    .feature-card .title-bar::before,
    .feature-card .title-bar::after {
      opacity: 0.8;
    }
  }
  
/* HyperCard-style title bars */
.feature-card .card-content {
    padding: 1rem;
  }

/* Dark mode refinements */
@media (prefers-color-scheme: dark) {
  .feature-card .title-bar .title {
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.1),
      1px 1px 0 rgba(0, 0, 0, 0.2);
  }
}

 /* Print Styles */
@media print {
  .window,
  .feature-card,
  .intro-card {
    box-shadow: none;
    border: 1px solid var(--mac-black);
  }
  .title-bar {
    background: none;
    border-bottom: 1px solid var(--mac-black);
  }
}

/* ============================================
   Keyboard Shortcut Feedback
   ============================================ */

.shortcut-feedback {
  position: fixed;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-surface, #171717);
  color: var(--color-fg, #FAFAFA);
  padding: 0.75rem 1.5rem;
  border-radius: 0.5rem;
  font-family: var(--font-mono, monospace);
  font-size: 0.875rem;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  opacity: 0;
  transition: opacity 0.2s ease;
  z-index: 9999;
  pointer-events: none;
}

.shortcut-feedback.visible {
  opacity: 1;
}

/* Theme-specific feedback styling */
.terminal-theme .shortcut-feedback {
  background: var(--color-surface);
  border: 1px solid var(--color-accent);
  color: var(--color-accent);
}

.neon-terminal .shortcut-feedback {
  background: var(--box-bg);
  border: 1px solid var(--fg);
  color: var(--fg);
  box-shadow: 0 0 15px rgba(74, 222, 128, 0.2);
}

.pure-mac-84 .shortcut-feedback {
  background: var(--bg);
  border: 4px solid var(--fg);
  border-radius: 0;
  box-shadow: 2px 2px 0 var(--fg);
}

.stack-theme .shortcut-feedback {
  background: var(--color-surface);
  border: 2px solid var(--color-border);
  border-radius: 0.75rem;
  box-shadow: 0 4px 6px -1px var(--card-shadow);
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .shortcut-feedback {
    transition: opacity 0.1s ease;
  }
}