/* Kaligraf Design — CSS Design System
   Single source of truth for all token values.
   Source: spec/phase-2/00-design-foundation.md + spec/phase-4/00-visual-system.md
   All other CSS modules import this file first.
   Do not hardcode pixel values anywhere else — reference tokens by name. */

/* Google Fonts — loaded here so all modules inherit */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;1,400&family=IBM+Plex+Sans:wght@400;500;600&display=swap');

:root {

  /* ── Color Tokens ─────────────────────────────────────── */

  --color-bg-primary:          #2D1B4E;   /* Deep Indigo */
  --color-bg-secondary:        #F8F7F5;   /* Off-White */
  --color-bg-charcoal:         #2C2C2C;   /* Charcoal */

  --color-accent:              #7C3AED;   /* Electric Violet */
  --color-accent-hover:        #6D28D9;   /* Electric Violet -10% */
  --color-accent-active:       #5B21B6;   /* Electric Violet -20% */
  --color-accent-subtle:       rgba(124, 58, 237, 0.08);

  --color-text-on-dark:        #FFFFFF;
  --color-text-on-dark-muted:  rgba(255, 255, 255, 0.62);
  --color-text-on-light:       #1A1A1A;
  --color-text-on-light-muted: rgba(26, 26, 26, 0.52);

  --color-border-on-dark:      rgba(255, 255, 255, 0.12);
  --color-border-on-light:     rgba(26, 26, 26, 0.12);

  --color-silver:              #C0C0C0;
  --color-gold:                #C9A84C;   /* Automotive context only */
  --color-error:               #E53935;
  --color-success:             #2E7D32;

  /* ── Focus Ring ───────────────────────────────────────── */

  --focus-ring-color:          #7C3AED;
  --focus-ring-width:          2px;
  --focus-ring-offset:         2px;

  /* ── Font Families ────────────────────────────────────── */

  /* Latin/Cyrillic fallbacks (Georgia/Times, system) come BEFORE the CJK fonts so that
     PL diacritics (ą ł ś ć ż…) and UK Cyrillic never render in a Chinese serif when
     Playfair/IBM Plex's latin-ext/cyrillic subset is slow or fails to load. CJK fonts
     stay in the stack for ZH — Latin/Cyrillic fonts lack CJK glyphs, so Chinese skips to them. */
  --font-family-display: 'Playfair Display', Georgia, 'Times New Roman', Times, 'Source Han Serif SC', 'Noto Serif SC', 'Songti SC', 'SimSun', serif;
  --font-family-body:    'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'PingFang SC', 'Noto Sans SC', 'Microsoft YaHei', sans-serif;

  /* ── Typography — Desktop Sizes ──────────────────────── */

  --size-display-xl:  96px;
  --size-display-lg:  72px;
  --size-h1:          56px;
  --size-h2:          40px;
  --size-h3:          28px;
  --size-h4:          20px;
  --size-body-lg:     18px;
  --size-body-md:     16px;
  --size-body-sm:     14px;
  --size-ui-label:    12px;
  --size-caption:     12px;

  /* ── Typography — Tablet Sizes (768px–1024px) ────────── */

  --size-display-xl-tablet: 72px;
  --size-display-lg-tablet: 56px;
  --size-h1-tablet:         44px;
  --size-h2-tablet:         32px;
  --size-h3-tablet:         24px;

  /* ── Typography — Mobile Sizes ───────────────────────── */

  --size-display-xl-mobile: 56px;
  --size-display-lg-mobile: 44px;
  --size-h1-mobile:         36px;
  --size-h2-mobile:         28px;
  --size-h3-mobile:         22px;
  --size-h4-mobile:         18px;
  --size-body-lg-mobile:    17px;

  /* ── Line Heights ─────────────────────────────────────── */

  --lh-display-xl: 1.02;
  --lh-display-lg: 1.06;
  --lh-h1:         1.1;
  --lh-h2:         1.14;
  --lh-h3:         1.22;
  --lh-h4:         1.3;
  --lh-body-lg:    1.65;
  --lh-body-md:    1.65;
  --lh-body-sm:    1.6;
  --lh-ui-label:   1.4;
  --lh-caption:    1.5;

  /* ── Letter Spacing ───────────────────────────────────── */

  --ls-display-xl:  -0.03em;
  --ls-display-lg:  -0.025em;
  --ls-h1:          -0.02em;
  --ls-h2:          -0.015em;
  --ls-h3:          -0.01em;
  --ls-h4:          0;
  --ls-body:        0;
  --ls-ui-label:    0.09em;
  --ls-caption:     0.01em;

  /* ── Spacing — Section Padding ───────────────────────── */
  /* Apply to padding-top and padding-bottom of <section> blocks */

  --section-pad-sm:          64px;
  --section-pad-md:          96px;
  --section-pad-lg:          160px;

  --section-pad-sm-mobile:   48px;
  --section-pad-md-mobile:   64px;
  --section-pad-lg-mobile:   96px;

  /* ── Spacing — Component Gap ─────────────────────────── */
  /* Vertical distance between components within a section */

  --component-gap-sm:        24px;
  --component-gap-md:        40px;
  --component-gap-lg:        64px;

  --component-gap-sm-mobile: 16px;
  --component-gap-md-mobile: 28px;
  --component-gap-lg-mobile: 40px;

  /* ── Generic Spacing Scale ───────────────────────────── */

  --space-0:   0;
  --space-xs:  0.25rem;
  --space-sm:  0.5rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2rem;
  --space-xxl: 3rem;

  /* ── Grid ─────────────────────────────────────────────── */

  --grid-max-width:              1280px;
  --grid-cols-desktop:           12;
  --grid-cols-tablet:            8;
  --grid-cols-mobile:            4;
  --grid-gutter-desktop:         24px;
  --grid-gutter-tablet:          20px;
  --grid-gutter-mobile:          16px;
  --grid-outer-margin-desktop:   40px;   /* minimum; layout.css uses max() */
  --grid-outer-margin-tablet:    32px;
  --grid-outer-margin-mobile:    20px;

  /* ── Navigation ───────────────────────────────────────── */

  --nav-height-desktop:          64px;
  --nav-height-mobile:           56px;
  --nav-bg-transparent:          transparent;
  --nav-bg-solid:                #2D1B4E;   /* = --color-bg-primary */
  --nav-transition:              background-color 200ms ease, box-shadow 200ms ease;

  /* ── CTA ──────────────────────────────────────────────── */

  --cta-min-width:               220px;

  /* ── Borders ──────────────────────────────────────────── */

  --border-radius-button:        2px;
  --border-radius-input:         2px;

  /* ── Image Scrim ──────────────────────────────────────── */
  /* Deep Indigo scrim — never use black */

  --scrim-gradient: linear-gradient(to top, rgba(45, 27, 78, 0.70) 0%, rgba(45, 27, 78, 0.30) 40%, transparent 100%);
  --scrim-solid:    rgba(45, 27, 78, 0.82);

  /* ── Aspect Ratios ────────────────────────────────────── */

  --ar-hero-wide:  16 / 9;
  --ar-editorial:  4 / 3;
  --ar-square:     1 / 1;
  --ar-portrait:   2 / 3;
  --ar-vertical:   9 / 16;
  --ar-cinematic:  21 / 9;

  /* ── Motion — Durations ───────────────────────────────── */

  --motion-fade-up-duration:         400ms;
  --motion-fade-in-duration:         300ms;
  --motion-reveal-scale-duration:    600ms;
  --motion-slide-in-left-duration:   500ms;
  --motion-hero-entrance-duration:   800ms;
  --motion-nav-fade-duration:        300ms;
  --motion-nav-fade-delay:           200ms;
  --motion-hover-lift-in:            200ms;
  --motion-hover-lift-out:           250ms;
  --motion-hover-underline:          180ms;
  --motion-button-press:             80ms;
  --motion-video-scrub:              200ms;
  --motion-reel-fade:                600ms;
  --motion-reel-fade-delay:          1000ms;

  /* ── Motion — Stagger Intervals ──────────────────────── */

  --stagger-fade-up:     80ms;
  --stagger-fade-in:     60ms;
  --stagger-reveal:      100ms;
  --stagger-hero:        120ms;

  /* ── Motion — Easing ──────────────────────────────────── */

  --ease-standard: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-spring:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out:      ease-out;
  --ease-in:       ease-in;

}

/* ── Animation Keyframes ──────────────────────────────────
   Defined here; applied in components.css and by D4 JS.
   Classes prefixed with .anim- are the CSS side.
   JS (D4) will toggle .is-visible to trigger them.
   ─────────────────────────────────────────────────────── */

@keyframes fade-up-enter {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

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

@keyframes reveal-scale-enter {
  from { opacity: 0; transform: scale(0.96); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes slide-in-left-enter {
  from { opacity: 0; transform: translateX(-40px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes hero-entrance-enter {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Initial hidden states — D4 will add .is-visible to trigger */
.anim-fade-up,
.anim-fade-in,
.anim-reveal-scale,
.anim-slide-in-left,
.anim-hero-entrance {
  opacity: 0;
}

.anim-fade-up.is-visible {
  animation: fade-up-enter var(--motion-fade-up-duration) var(--ease-standard) forwards;
}

.anim-fade-in.is-visible {
  animation: fade-in-enter var(--motion-fade-in-duration) var(--ease-standard) forwards;
}

.anim-reveal-scale.is-visible {
  animation: reveal-scale-enter var(--motion-reveal-scale-duration) var(--ease-spring) forwards;
}

.anim-slide-in-left.is-visible {
  animation: slide-in-left-enter var(--motion-slide-in-left-duration) var(--ease-spring) forwards;
}

.anim-hero-entrance.is-visible {
  animation: hero-entrance-enter var(--motion-hero-entrance-duration) var(--ease-spring) forwards;
}

/* Stagger delay helpers (max 8 per spec) */
.anim-delay-1 { animation-delay: calc(var(--stagger-delay, 80ms) * 1); }
.anim-delay-2 { animation-delay: calc(var(--stagger-delay, 80ms) * 2); }
.anim-delay-3 { animation-delay: calc(var(--stagger-delay, 80ms) * 3); }
.anim-delay-4 { animation-delay: calc(var(--stagger-delay, 80ms) * 4); }
.anim-delay-5 { animation-delay: calc(var(--stagger-delay, 80ms) * 5); }
.anim-delay-6 { animation-delay: calc(var(--stagger-delay, 80ms) * 6); }
.anim-delay-7 { animation-delay: calc(var(--stagger-delay, 80ms) * 7); }
.anim-delay-8 { animation-delay: calc(var(--stagger-delay, 80ms) * 8); }

/* ── Reduced Motion Override ──────────────────────────────
   Transforms suppressed entirely.
   Opacity changes still allowed at 100ms max.
   Video autoplay continues — it is content, not decoration.
   ─────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}