/**
 * Design Tokens
 * Cultiv8 Ventures Web Ecosystem
 * 
 * CSS Custom Properties defining the shared design system
 * Japanese zen aesthetic with Shinto-inspired vermillion accents
 * 
 * Usage: All three sites MUST use these tokens
 * Reference: specs/001-web-ecosystem/contracts/design-system-contract.md
 */

:root {
  /* ============================================
     COLOR PALETTE
     ============================================ */
  
  /* Primary - Shinto Vermillion (朱色) */
  --color-vermillion: #D64933;        /* Primary accent, CTAs, active states */
  --color-vermillion-dark: #B33D2A;   /* Hover states, emphasis */
  
  /* Neutral - Zen Minimalism */
  --color-ink: #1A1A1A;               /* Primary text */
  --color-stone: #4A4A4A;             /* Secondary text, captions */
  --color-mist: #F5F5F3;              /* Backgrounds, cards */
  --color-paper: #FAFAF8;             /* Page background */
  --color-white: #FFFFFF;             /* Card backgrounds, text on dark */
  
  
  /* ============================================
     TYPOGRAPHY
     ============================================ */
  
  /* Font Families - Noto JP for zen aesthetic */
  --font-serif: 'Noto Serif JP', serif;
  --font-sans: 'Noto Sans JP', sans-serif;
  
  /* Font Sizes - Modular scale based on 16px base */
  --font-size-xs: 0.75rem;    /* 12px - captions, legal */
  --font-size-sm: 0.875rem;   /* 14px - small text */
  --font-size-base: 1rem;     /* 16px - body text */
  --font-size-lg: 1.25rem;    /* 20px - card titles */
  --font-size-xl: 1.5rem;     /* 24px - section subheadings */
  --font-size-2xl: 2rem;      /* 32px - section headings */
  --font-size-3xl: 3rem;      /* 48px - hero headings */
  
  /* Font Weights */
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  
  /* Line Heights */
  --line-height-tight: 1.2;
  --line-height-base: 1.5;
  --line-height-relaxed: 1.75;
  
  
  /* ============================================
     SPACING - Ma (間)
     Japanese principle of generous negative space
     ============================================ */
  
  --space-xs: 8px;      /* 0.5rem - inline gaps */
  --space-sm: 16px;     /* 1rem - component padding */
  --space-md: 32px;     /* 2rem - section gaps */
  --space-lg: 64px;     /* 4rem - major section separators */
  --space-xl: 128px;    /* 8rem - hero breathing room */
  
  
  /* ============================================
     LAYOUT
     ============================================ */
  
  /* Container Widths */
  --container-sm: 640px;   /* Small content */
  --container-md: 768px;   /* Medium content */
  --container-lg: 1024px;  /* Large content */
  --container-xl: 1280px;  /* Extra large content */
  
  /* Z-index Scale */
  --z-base: 1;
  --z-dropdown: 10;
  --z-sticky: 100;
  --z-modal: 1000;
  --z-toast: 10000;
  
  
  /* ============================================
     RESPONSIVE BREAKPOINTS
     ============================================ */
  
  --bp-mobile: 320px;     /* Minimum supported width */
  --bp-tablet: 768px;     /* Tablet portrait */
  --bp-desktop: 1024px;   /* Desktop */
  --bp-wide: 1920px;      /* Wide desktop - maximum supported width */
  
  
  /* ============================================
     ANIMATION & TRANSITIONS
     ============================================ */
  
  /* Timing Functions */
  --ease-in-out: 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);
  
  /* Durations */
  --duration-fast: 150ms;
  --duration-base: 200ms;
  --duration-slow: 300ms;
  
  
  /* ============================================
     BORDERS & SHADOWS
     ============================================ */
  
  /* Border Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-full: 9999px;
  
  /* Box Shadows - Subtle, zen-inspired */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-base: 0 2px 8px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.12);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.15);
  
  
  /* ============================================
     COMPONENT-SPECIFIC
     ============================================ */
  
  /* Focus Indicator */
  --focus-width: 2px;
  --focus-offset: 2px;
  --focus-color: var(--color-vermillion);
  
  /* Button Padding */
  --button-padding-y: var(--space-sm);
  --button-padding-x: var(--space-md);
  
  /* Card Styling */
  --card-padding: var(--space-md);
  --card-radius: var(--radius-md);
  --card-shadow: var(--shadow-base);
}


/* ============================================
   RESPONSIVE TOKEN ADJUSTMENTS
   ============================================ */

/* Tablet and up: Slightly larger hero text */
@media (min-width: 768px) {
  :root {
    --font-size-3xl: 3.5rem;  /* 56px */
  }
}

/* Desktop and up: Maximum hero text size */
@media (min-width: 1024px) {
  :root {
    --font-size-3xl: 4rem;    /* 64px */
  }
}

/* Wide desktop: Increase container padding */
@media (min-width: 1920px) {
  :root {
    --space-xl: 160px;        /* Extra breathing room */
  }
}


/* ============================================
   DARK MODE SUPPORT (Future Enhancement)
   ============================================ */

/*
@media (prefers-color-scheme: dark) {
  :root {
    --color-ink: #F5F5F3;
    --color-stone: #CCCCCC;
    --color-mist: #2A2A2A;
    --color-paper: #1A1A1A;
    --color-white: #000000;
  }
}
*/


/* ============================================
   PRINT STYLES
   ============================================ */

@media print {
  :root {
    --color-ink: #000000;
    --color-paper: #FFFFFF;
    --color-white: #FFFFFF;
  }
}