/*
  CREATE SOMETHING Canon Design System
  Shared across all properties: .io, .space, .agency, .ltd

  Philosophy: "Weniger, aber besser" - Dieter Rams
  Font Stack: Stack Sans Notch (variable weight 200-700) + JetBrains Mono (code)

  This file combines Canon tokens with base styles, utilities, and components.
  Property-specific customizations live in each app.css.

  Architecture:
  - tokens.css: Pure token definitions (import this for tokens only)
  - canon.css: Complete system with base styles (import this for full Canon)
*/

/* ==========================================================================
   Canon Design Tokens
   Imported from the single source of truth
   ========================================================================== */

@import './tokens.css';
@import './components.css';

/* ==========================================================================
   Base Styles - Wrapped in @layer base for Tailwind compatibility
   These styles apply AFTER Tailwind's preflight reset
   ========================================================================== */

@layer base {
  html {
    scroll-behavior: smooth;
  }

  body {
    font-family: var(--font-sans);
    font-optical-sizing: auto;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
    background: var(--color-bg-pure);
    color: var(--color-fg-primary);
    min-height: 100vh;
    position: relative;
    overflow-x: hidden;
    letter-spacing: var(--tracking-tight);
  }

  /* Typography - Golden Ratio Implementation */
  h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-sans);
    font-optical-sizing: auto;
  }

  h1 {
    font-size: var(--text-display-xl);
    font-weight: var(--font-semibold);
    line-height: 1.05;
    letter-spacing: var(--tracking-tighter);
  }

  h2 {
    font-size: var(--text-h1);
    font-weight: var(--font-semibold);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tighter);
  }

  h3 {
    font-size: var(--text-h2);
    font-weight: var(--font-semibold);
    line-height: var(--leading-snug);
    letter-spacing: var(--tracking-tight);
  }

  h4 {
    font-size: var(--text-h3);
    font-weight: var(--font-semibold);
    line-height: var(--leading-snug);
  }

  h5 {
    font-size: var(--text-h4);
    font-weight: var(--font-semibold);
  }

  h6 {
    font-size: var(--text-h5);
    font-weight: var(--font-semibold);
  }

  p {
    font-size: var(--text-body);
    line-height: var(--leading-relaxed);
    letter-spacing: var(--tracking-tight);
  }

  /* Code and monospace elements */
  code, pre, .font-mono {
    font-family: var(--font-mono);
  }
}

/* ==========================================================================
   Custom Scrollbar - Minimal
   ========================================================================== */

::-webkit-scrollbar {
  width: 10px;
  background-color: var(--color-bg-pure);
}

::-webkit-scrollbar-track {
  background-color: var(--color-bg-pure);
}

::-webkit-scrollbar-thumb {
  background-color: var(--color-bg-surface);
  border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
  background-color: var(--color-fg-muted);
}

/* ==========================================================================
   Section & Content Spacing (Golden Ratio)
   ========================================================================== */

section {
  padding-top: var(--space-2xl);
  padding-bottom: var(--space-2xl);
}

.hero {
  padding-top: var(--space-3xl);
  padding-bottom: var(--space-2xl);
}

h2 + p {
  margin-top: var(--space-lg);
}

p + p {
  margin-top: var(--space-md);
}

/* ==========================================================================
   Micro-interactions - Refined Transitions
   ========================================================================== */

a {
  transition: opacity var(--duration-micro) var(--ease-standard);
}

a:hover {
  opacity: 0.7;
}

.card {
  transition: all var(--duration-standard) var(--ease-standard);
}

.card:hover {
  border-color: var(--color-border-strong);
  transform: translateX(2px);
}

/* ==========================================================================
   Selection & Focus States
   ========================================================================== */

::selection {
  background-color: var(--color-focus);
  color: var(--color-fg-primary);
}

*:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ==========================================================================
   Canon Utility Classes
   ========================================================================== */

.link-muted {
  opacity: var(--opacity-muted);
  transition: opacity var(--duration-micro) var(--ease-standard);
}

.link-muted:hover {
  opacity: var(--opacity-full);
}

.card-gradient-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom right, var(--color-fg-subtle), transparent);
  opacity: 0;
  transition: opacity var(--duration-micro) var(--ease-standard);
  pointer-events: none;
}

.group:hover .card-gradient-overlay {
  opacity: 1;
}

/* ==========================================================================
   View Transitions API - Hermeneutic Navigation
   "Navigation should feel like dwelling, not jumping"
   ========================================================================== */

::view-transition-old(root) {
  animation: view-transition-fade-out var(--view-transition-duration) var(--ease-standard);
}

::view-transition-new(root) {
  animation: view-transition-fade-in var(--view-transition-duration) var(--ease-standard);
}

@keyframes view-transition-fade-out {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes view-transition-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

body.transitioning-out {
  animation: cross-property-exit var(--duration-standard) var(--ease-standard) forwards;
}

@keyframes cross-property-exit {
  from { opacity: 1; transform: scale(1); }
  to { opacity: 0; transform: scale(0.98); }
}

body.transitioning-in {
  animation: cross-property-entry var(--duration-complex) var(--ease-standard);
}

@keyframes cross-property-entry {
  from { opacity: 0; transform: scale(1.02); }
  to { opacity: 1; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*),
  body.transitioning-out,
  body.transitioning-in {
    animation: none !important;
  }
}

/* ==========================================================================
   High Contrast Mode - Accessibility
   ==========================================================================

   Respects the prefers-contrast: more media query for users who need
   increased contrast. All changes maintain WCAG AAA compliance (7:1 ratio)
   where possible.

   Philosophy: Same design language, increased visibility. We don't change
   the structure, only enhance the contrast between foreground and background.

   Changes:
   - Foreground colors: Increased to full white (#fff) or near-white
   - Background colors: Darker, more distinct separation
   - Borders: More visible (increased opacity)
   - Focus indicators: Stronger, more visible
   - Semantic colors: Brighter variants for better visibility
   ========================================================================== */

@media (prefers-contrast: more) {
  :root {
    /* Background colors - darker, more separation */
    --color-bg-pure: #000000;
    --color-bg-elevated: #050505;
    --color-bg-surface: #0a0a0a;
    --color-bg-subtle: #121212;

    /* Foreground colors - brighter, higher contrast
       All achieve WCAG AAA (7:1+) on pure black */
    --color-fg-primary: #ffffff;
    --color-fg-secondary: rgba(255, 255, 255, 0.95);
    --color-fg-tertiary: rgba(255, 255, 255, 0.85);
    --color-fg-muted: rgba(255, 255, 255, 0.75); /* Increased from 0.46 */
    --color-fg-subtle: rgba(255, 255, 255, 0.5); /* Increased from 0.2 */

    /* Border colors - more visible */
    --color-border-default: rgba(255, 255, 255, 0.3); /* Increased from 0.1 */
    --color-border-emphasis: rgba(255, 255, 255, 0.5); /* Increased from 0.2 */
    --color-border-strong: rgba(255, 255, 255, 0.7); /* Increased from 0.3 */

    /* Interactive states - more prominent */
    --color-hover: rgba(255, 255, 255, 0.15); /* Increased from 0.05 */
    --color-active: rgba(255, 255, 255, 0.25); /* Increased from 0.1 */
    --color-focus: rgba(255, 255, 255, 0.9); /* Increased from 0.5 */

    /* Semantic colors - brighter for high contrast
       All achieve WCAG AAA (7:1+) on pure black */
    --color-success: #5ddb5d; /* Brighter green: 10.8:1 */
    --color-success-muted: rgba(93, 219, 93, 0.3);
    --color-success-border: rgba(93, 219, 93, 0.5);

    --color-error: #ff6b6b; /* Brighter red: 6.77:1 */
    --color-error-muted: rgba(255, 107, 107, 0.3);
    --color-error-border: rgba(255, 107, 107, 0.5);

    --color-warning: #ffc857; /* Brighter amber: 12.4:1 */
    --color-warning-muted: rgba(255, 200, 87, 0.3);
    --color-warning-border: rgba(255, 200, 87, 0.5);

    --color-info: #7eb8ff; /* Brighter blue: 9.17:1 */
    --color-info-muted: rgba(126, 184, 255, 0.3);
    --color-info-border: rgba(126, 184, 255, 0.5);

    /* Data visualization - brighter palette */
    --color-data-1: #93c5fd; /* Brighter blue */
    --color-data-2: #4ade80; /* Brighter green */
    --color-data-3: #d8b4fe; /* Brighter purple */
    --color-data-4: #fcd34d; /* Brighter amber */
    --color-data-5: #f9a8d4; /* Brighter pink */
    --color-data-6: #fde047; /* Brighter yellow */
  }

  /* Enhanced focus visible state for high contrast */
  *:focus-visible {
    outline: 3px solid var(--color-focus);
    outline-offset: 3px;
  }

  /* Enhanced selection for high contrast */
  ::selection {
    background-color: var(--color-focus);
    color: var(--color-bg-pure);
  }

  /* Enhanced scrollbar visibility */
  ::-webkit-scrollbar-thumb {
    background-color: var(--color-fg-muted);
  }

  ::-webkit-scrollbar-thumb:hover {
    background-color: var(--color-fg-secondary);
  }

  /* Enhanced link visibility */
  a:hover {
    opacity: 1;
    text-decoration: underline;
  }

  /* Enhanced card hover state */
  .card:hover {
    border-color: var(--color-fg-primary);
  }
}

/* ==========================================================================
   Syntax Highlighting - Monochrome Theme
   ========================================================================== */

.hljs {
  display: block;
  overflow-x: auto;
  padding: 1em;
  background: var(--color-bg-subtle);
  color: var(--color-fg-secondary);
}

.hljs-comment,
.hljs-quote {
  color: var(--color-fg-muted);
  font-style: italic;
}

.hljs-keyword,
.hljs-selector-tag,
.hljs-subst {
  color: var(--color-fg-primary);
  font-weight: var(--font-semibold);
}

.hljs-number,
.hljs-literal,
.hljs-variable,
.hljs-template-variable,
.hljs-tag .hljs-attr {
  color: var(--color-fg-tertiary);
}

.hljs-string,
.hljs-doctag {
  color: var(--color-fg-secondary);
}

.hljs-title,
.hljs-section,
.hljs-selector-id {
  color: var(--color-fg-primary);
  font-weight: var(--font-bold);
}

.hljs-type,
.hljs-class .hljs-title {
  color: var(--color-fg-secondary);
  font-weight: var(--font-semibold);
}

.hljs-tag,
.hljs-name,
.hljs-attribute {
  color: var(--color-fg-primary);
  font-weight: var(--font-regular);
}

.hljs-regexp,
.hljs-link {
  color: var(--color-fg-secondary);
}

.hljs-symbol,
.hljs-bullet {
  color: var(--color-fg-tertiary);
}

.hljs-built_in,
.hljs-builtin-name {
  color: var(--color-fg-secondary);
}

.hljs-meta {
  color: var(--color-fg-muted);
  font-weight: var(--font-semibold);
}

.hljs-deletion {
  background: var(--color-error-muted);
  color: var(--color-error);
}

.hljs-addition {
  background: var(--color-success-muted);
  color: var(--color-success);
}

.hljs-emphasis {
  font-style: italic;
}

.hljs-strong {
  font-weight: bold;
}

pre code.hljs {
  border-radius: var(--radius-md);
  font-size: var(--text-body-sm);
  line-height: var(--leading-relaxed);
}

/* ==========================================================================
   Component Layer - Shared Utilities
   ========================================================================== */

@layer components {
  .fade-in {
    animation: fadeIn var(--duration-complex) ease-out;
  }

  @keyframes fadeIn {
    from {
      opacity: 0;
      transform: translateY(20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .card-lift {
    transition: all var(--duration-standard) var(--ease-standard);
  }

  .card-lift:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-2xl);
  }

  .page-transition {
    animation: pageEnter 0.4s ease-out;
  }

  @keyframes pageEnter {
    from { opacity: 0; }
    to { opacity: 1; }
  }
}

/* ==========================================================================
   Utility Layer - Common Patterns
   ========================================================================== */

@layer utilities {
  /* ==========================================================================
     Canon-Compliant Wrapper Styles
     ==========================================================================

     These utility classes provide Canon-compliant alternatives to Tailwind
     opacity variants. Use these instead of Tailwind's arbitrary opacity values.

     Philosophy: "Tailwind for structure, Canon for aesthetics"

     Design Decision: Tailwind opacity utilities (e.g., bg-white/5) create
     transparent overlays. Canon uses solid semantic colors for consistency
     across all backgrounds. On --color-bg-pure (#000), the visual effect
     is identical while providing better predictability.

     Migration guide (Tailwind → Canon class → CSS token):
       bg-white/5    → .bg-subtle     → var(--color-bg-subtle)     // #1a1a1a - card/section backgrounds
       bg-white/10   → .bg-surface    → var(--color-bg-surface)    // #111111 - elevated surfaces
       bg-white/5    → .bg-hover      → var(--color-hover)         // rgba(255,255,255,0.05) - interactive hover only
       bg-white/10   → .bg-active     → var(--color-active)        // rgba(255,255,255,0.1) - active/pressed states
       text-white/40 → .text-muted    → var(--color-fg-muted)      // rgba(255,255,255,0.4)
       text-white/60 → .text-tertiary → var(--color-fg-tertiary)   // rgba(255,255,255,0.6)
       text-white/80 → .text-secondary → var(--color-fg-secondary) // rgba(255,255,255,0.8)
       border-white/10 → .border-default → var(--color-border-default)   // rgba(255,255,255,0.1)
       border-white/20 → .border-emphasis → var(--color-border-emphasis) // rgba(255,255,255,0.2)
       border-white/30 → .border-strong → var(--color-border-strong)     // rgba(255,255,255,0.3)

     Context guidance:
       - For static backgrounds (cards, panels): use .bg-subtle or .bg-surface
       - For interactive states (hover, focus): use .bg-hover or .bg-active
       - Both achieve the same visual result on pure black backgrounds

     ========================================================================== */

  /* Background Opacity Wrappers
   * Maps Tailwind bg-white/XX to Canon background tokens
   */
  .bg-pure { background-color: var(--color-bg-pure); }
  .bg-elevated { background-color: var(--color-bg-elevated); }
  .bg-surface { background-color: var(--color-bg-surface); }
  .bg-subtle { background-color: var(--color-bg-subtle); }
  .bg-hover { background-color: var(--color-hover); }
  .bg-active { background-color: var(--color-active); }

  /* Text Opacity Wrappers
   * Maps Tailwind text-white/XX to Canon foreground tokens
   */
  .text-primary { color: var(--color-fg-primary); }
  .text-secondary { color: var(--color-fg-secondary); }
  .text-tertiary { color: var(--color-fg-tertiary); }
  .text-muted { color: var(--color-fg-muted); }
  .text-subtle { color: var(--color-fg-subtle); }

  /* Border Opacity Wrappers
   * Maps Tailwind border-white/XX to Canon border tokens
   */
  .border-default { border-color: var(--color-border-default); }
  .border-emphasis { border-color: var(--color-border-emphasis); }
  .border-strong { border-color: var(--color-border-strong); }

  /* Semantic State Colors */
  .text-success { color: var(--color-success); }
  .text-error { color: var(--color-error); }
  .text-warning { color: var(--color-warning); }
  .text-info { color: var(--color-info); }

  .bg-success { background-color: var(--color-success-muted); }
  .bg-error { background-color: var(--color-error-muted); }
  .bg-warning { background-color: var(--color-warning-muted); }
  .bg-info { background-color: var(--color-info-muted); }

  .border-success { border-color: var(--color-success-border); }
  .border-error { border-color: var(--color-error-border); }
  .border-warning { border-color: var(--color-warning-border); }
  .border-info { border-color: var(--color-info-border); }

  /* ==========================================================================
     Hero Pattern - Unified across all properties
     Pattern: eyebrow (context) → hero-title (assertion) → hero-subtitle/description (evidence)
     ========================================================================== */

  /* Eyebrow - Context label above headings */
  .eyebrow {
    font-size: var(--text-body-sm);
    text-transform: uppercase;
    letter-spacing: var(--tracking-widest);
    color: var(--color-fg-tertiary);
    margin-bottom: var(--space-md);
  }

  /* Hero Title - Primary assertion, largest display text */
  .hero-title {
    font-size: var(--text-display-xl);
    font-weight: var(--font-light);
    line-height: 1.05;
    letter-spacing: var(--tracking-tighter);
    margin-bottom: var(--space-md);
  }

  /* Hero Subtitle - Supporting statement */
  .hero-subtitle {
    font-size: var(--text-h3);
    color: var(--color-fg-secondary);
    line-height: var(--leading-relaxed);
    max-width: 42rem;
    margin: 0 auto var(--space-sm);
  }

  /* Hero Description - Additional context */
  .hero-description {
    font-size: var(--text-body-lg);
    color: var(--color-fg-tertiary);
    line-height: var(--leading-relaxed);
    max-width: 36rem;
    margin: 0 auto;
  }

  .text-shadow-soft {
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  }

  .bg-gradient-dark {
    background: linear-gradient(180deg, var(--color-bg-pure) 0%, var(--color-bg-elevated) 100%);
  }

  .bg-gradient-subtle {
    background: linear-gradient(135deg, var(--color-bg-elevated) 0%, var(--color-bg-surface) 100%);
  }

  .border-gradient {
    border: 1px solid transparent;
    background-image: linear-gradient(var(--color-bg-surface), var(--color-bg-surface)),
                      linear-gradient(135deg, var(--color-border-emphasis), var(--color-border-default));
    background-origin: border-box;
    background-clip: padding-box, border-box;
  }

  .transition-smooth {
    transition: all var(--duration-standard) var(--ease-standard);
  }

  .line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* ==========================================================================
     Accessibility Focus Utilities
     ==========================================================================

     Shared focus styles for accessible interactive elements.
     Use these classes instead of duplicating focus styles in components.

     Usage:
       .a11y-focus       - Apply to focusable elements (buttons, links, interactive)
       .a11y-focus-within - Apply to containers whose children receive focus

     These use var(--color-focus) for consistent focus indication.
     ========================================================================== */

  /* Standard focus ring for interactive elements */
  .a11y-focus:focus-visible {
    outline: 2px solid var(--color-focus);
    outline-offset: 2px;
  }

  /* Focus state for containers (shows when any descendant is focused) */
  .a11y-focus-within:focus-within {
    outline: 2px solid var(--color-focus);
    outline-offset: 2px;
  }

  /* Variant with no outline offset (for tight layouts) */
  .a11y-focus-tight:focus-visible {
    outline: 2px solid var(--color-focus);
    outline-offset: 0;
  }

  /* Variant with inward offset (for nested elements) */
  .a11y-focus-inset:focus-visible {
    outline: 2px solid var(--color-focus);
    outline-offset: -2px;
  }

  /* ==========================================================================
     Skip to Content Link
     ==========================================================================

     Accessible skip link that allows keyboard users to bypass navigation
     and jump directly to main content. Visually hidden until focused.

     Usage:
       <a href="#main-content" class="skip-to-content">Skip to main content</a>
       ...
       <main id="main-content">...</main>

     WCAG 2.4.1: Bypass Blocks - Provides mechanism to skip repeated content.
     ========================================================================== */

  .skip-to-content {
    position: absolute;
    top: -100%;
    left: 50%;
    transform: translateX(-50%);
    z-index: var(--z-tooltip);
    padding: var(--space-sm) var(--space-md);
    background: var(--color-bg-surface);
    color: var(--color-fg-primary);
    border: 1px solid var(--color-border-emphasis);
    border-radius: var(--radius-md);
    font-size: var(--text-body-sm);
    font-weight: var(--font-medium);
    text-decoration: none;
    white-space: nowrap;
    transition: top var(--duration-micro) var(--ease-standard);
  }

  .skip-to-content:focus {
    top: var(--space-sm);
    outline: 2px solid var(--color-focus);
    outline-offset: 2px;
  }
}