/*
  Drone Stream Technology — Design Tokens
  colors_and_type.css

  Google Fonts used (load in HTML head):
  @import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400;1,500&family=Jost:wght@300;400;500&family=Noto+Serif+JP:wght@300;400;500;700&family=Noto+Sans+JP:wght@300;400;500&family=IBM+Plex+Mono:wght@300;400&display=swap');
*/

/* ─────────────────────────────────────────────────────────────
   BASE COLOR PALETTE
   ───────────────────────────────────────────────────────────── */
:root {
  /* Neutrals — warm near-black scale */
  --color-black:        #080808;
  --color-ink-950:      #0D0D0B;
  --color-ink-900:      #111110;
  --color-ink-800:      #1A1A18;
  --color-ink-700:      #252522;
  --color-ink-600:      #2F2F2B;
  --color-ink-500:      #3A3A36;
  --color-ink-400:      #5A5A54;
  --color-ink-300:      #8A8A82;
  --color-ink-200:      #B4B4AA;
  --color-ink-100:      #D8D5CC;
  --color-ink-50:       #ECEAE4;

  /* Warm whites / creams */
  --color-cream-50:     #FAF8F4;
  --color-cream-100:    #F4F0E8;
  --color-cream-200:    #EDE8DC;
  --color-cream-300:    #E0D9CC;
  --color-white:        #FAFAF8;

  /* Accent — steel sky blue */
  --color-blue-700:     #1A2B38;
  --color-blue-600:     #243E52;
  --color-blue-500:     #4A7A9B;
  --color-blue-400:     #6A9AB8;
  --color-blue-300:     #92BAD0;
  --color-blue-200:     #C0D8E8;

  /* Functional */
  --color-error:        #8B3A3A;
  --color-success:      #3A6B50;
}

/* ─────────────────────────────────────────────────────────────
   SEMANTIC COLOR TOKENS (Dark mode — default)
   ───────────────────────────────────────────────────────────── */
:root {
  --bg-primary:         var(--color-ink-950);
  --bg-secondary:       var(--color-ink-800);
  --bg-elevated:        var(--color-ink-700);
  --bg-overlay:         rgba(13, 13, 11, 0.85);

  --fg-primary:         var(--color-cream-100);
  --fg-secondary:       var(--color-ink-200);
  --fg-muted:           var(--color-ink-300);
  --fg-subtle:          var(--color-ink-400);

  --accent:             var(--color-blue-500);
  --accent-hover:       var(--color-blue-400);
  --accent-muted:       var(--color-blue-700);

  --border:             var(--color-ink-500);
  --border-subtle:      var(--color-ink-600);
  --border-strong:      var(--color-ink-400);

  --shadow-card:        0 4px 24px rgba(0, 0, 0, 0.45);
  --shadow-elevated:    0 8px 40px rgba(0, 0, 0, 0.60);
  --shadow-subtle:      0 2px 8px  rgba(0, 0, 0, 0.30);

  --overlay-protection: linear-gradient(
    to top,
    rgba(8, 8, 8, 0.92) 0%,
    rgba(8, 8, 8, 0.55) 45%,
    rgba(8, 8, 8, 0.00) 100%
  );
}

/* ─────────────────────────────────────────────────────────────
   SEMANTIC COLOR TOKENS — Light mode
   ───────────────────────────────────────────────────────────── */
[data-theme="light"] {
  --bg-primary:         var(--color-cream-50);
  --bg-secondary:       var(--color-cream-100);
  --bg-elevated:        var(--color-cream-200);
  --bg-overlay:         rgba(250, 248, 244, 0.90);

  --fg-primary:         var(--color-ink-950);
  --fg-secondary:       var(--color-ink-600);
  --fg-muted:           var(--color-ink-400);
  --fg-subtle:          var(--color-ink-300);

  --accent:             var(--color-blue-600);
  --accent-hover:       var(--color-blue-700);
  --accent-muted:       var(--color-blue-200);

  --border:             var(--color-ink-100);
  --border-subtle:      var(--color-ink-50);
  --border-strong:      var(--color-ink-300);

  --shadow-card:        0 4px 24px rgba(0, 0, 0, 0.08);
  --shadow-elevated:    0 8px 40px rgba(0, 0, 0, 0.12);
  --shadow-subtle:      0 2px 8px  rgba(0, 0, 0, 0.05);

  --overlay-protection: linear-gradient(
    to top,
    rgba(250, 248, 244, 0.92) 0%,
    rgba(250, 248, 244, 0.55) 45%,
    rgba(250, 248, 244, 0.00) 100%
  );
}

/* ─────────────────────────────────────────────────────────────
   FONT FAMILIES
   ───────────────────────────────────────────────────────────── */
:root {
  --font-display:       'Cormorant Garamond', 'Noto Serif JP', Georgia, serif;
  --font-display-ja:    'Noto Serif JP', 'Cormorant Garamond', Georgia, serif;
  --font-body:          'Jost', 'Noto Sans JP', system-ui, sans-serif;
  --font-body-ja:       'Noto Sans JP', 'Jost', system-ui, sans-serif;
  --font-mono:          'IBM Plex Mono', 'Courier New', monospace;
  --font-label:         'Jost', 'Noto Sans JP', system-ui, sans-serif;
}

/* ─────────────────────────────────────────────────────────────
   TYPE SCALE — fluid sizing
   ───────────────────────────────────────────────────────────── */
:root {
  /* Size scale */
  --text-xs:    0.70rem;    /* 11.2px — metadata, timestamps */
  --text-sm:    0.813rem;   /* 13px   — captions, fine print */
  --text-base:  1rem;       /* 16px   — body */
  --text-md:    1.125rem;   /* 18px   — body large */
  --text-lg:    1.375rem;   /* 22px   — lead / intro */
  --text-xl:    1.75rem;    /* 28px   — section title */
  --text-2xl:   2.25rem;    /* 36px   — page title */
  --text-3xl:   3rem;       /* 48px   — display sm */
  --text-4xl:   4rem;       /* 64px   — display */
  --text-5xl:   5.5rem;     /* 88px   — hero display */
  --text-6xl:   7.5rem;     /* 120px  — hero large */

  /* Weight */
  --weight-thin:    300;
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semibold: 600;

  /* Line heights */
  --leading-tight:   1.15;
  --leading-snug:    1.35;
  --leading-normal:  1.60;
  --leading-relaxed: 1.80;
  --leading-loose:   2.10;

  /* Letter spacing */
  --tracking-tightest: -0.03em;
  --tracking-tight:    -0.015em;
  --tracking-normal:    0em;
  --tracking-wide:      0.08em;
  --tracking-wider:     0.14em;
  --tracking-widest:    0.22em;
}

/* ─────────────────────────────────────────────────────────────
   SEMANTIC TYPE STYLES
   ───────────────────────────────────────────────────────────── */

/* Hero display — cinematic headline */
.t-hero {
  font-family: var(--font-display);
  font-size: var(--text-5xl);
  font-weight: var(--weight-thin);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-primary);
}

.t-hero-ja {
  font-family: var(--font-display-ja);
  font-size: var(--text-4xl);
  font-weight: var(--weight-thin);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-normal);
  color: var(--fg-primary);
}

/* H1 — page title */
.t-h1 {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: var(--weight-thin);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tightest);
  color: var(--fg-primary);
}

/* H2 — section title */
.t-h2 {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--weight-regular);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-primary);
}

/* H3 — subsection title */
.t-h3 {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  font-weight: var(--weight-medium);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--fg-primary);
}

/* Lead / intro */
.t-lead {
  font-family: var(--font-body);
  font-size: var(--text-md);
  font-weight: var(--weight-thin);
  line-height: var(--leading-relaxed);
  letter-spacing: var(--tracking-normal);
  color: var(--fg-secondary);
}

/* Body */
.t-body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  letter-spacing: var(--tracking-normal);
  color: var(--fg-primary);
}

/* Caption */
.t-caption {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  letter-spacing: var(--tracking-wide);
  color: var(--fg-muted);
}

/* Label — all caps UI label */
.t-label {
  font-family: var(--font-label);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  line-height: var(--leading-normal);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--fg-muted);
}

/* Accent / accent gold */
.t-accent {
  font-family: var(--font-label);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--accent);
}

/* Mono — code/price/metadata */
.t-mono {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-normal);
  color: var(--fg-secondary);
}

/* ─────────────────────────────────────────────────────────────
   SPACING & LAYOUT TOKENS
   ───────────────────────────────────────────────────────────── */
:root {
  --space-1:    4px;
  --space-2:    8px;
  --space-3:    12px;
  --space-4:    16px;
  --space-5:    24px;
  --space-6:    32px;
  --space-7:    48px;
  --space-8:    64px;
  --space-9:    80px;
  --space-10:   96px;
  --space-11:   120px;
  --space-12:   160px;
  --space-13:   200px;

  --content-max-width: 1100px;
  --content-padding-x: clamp(24px, 6vw, 120px);

  --section-gap:    var(--space-12);
  --card-gap:       var(--space-6);
  --component-gap:  var(--space-5);

  /* Border radii — architectural, minimal */
  --radius-none:   0px;
  --radius-xs:     1px;
  --radius-sm:     2px;
  --radius-md:     4px;    /* only for small badges / tags */
  --radius-full:   9999px; /* pill — almost never used */
}

/* ─────────────────────────────────────────────────────────────
   GLOBAL BASE STYLES
   ───────────────────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  background-color: var(--bg-primary);
  color: var(--fg-primary);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
}

/* ─────────────────────────────────────────────────────────────
   UTILITY CLASSES
   ───────────────────────────────────────────────────────────── */

/* Transition presets */
.transition-opacity   { transition: opacity 400ms ease-out; }
.transition-slow      { transition: all 700ms ease-out; }
.transition-reveal    { transition: opacity 800ms ease-out, transform 800ms ease-out; }

/* Hover states */
.hover-dim { transition: opacity 300ms ease-out; }
.hover-dim:hover { opacity: 0.7; }

.hover-gold { transition: color 300ms ease-out; }
.hover-gold:hover { color: var(--accent); }

/* Grain overlay — film texture */
.grain-overlay::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 1;
}

/* Protection gradient — image overlay */
.protection-gradient {
  background: var(--overlay-protection);
}

/* Divider */
.divider {
  height: 1px;
  background: var(--border);
  border: none;
}

/* Hairline */
.hairline {
  height: 0.5px;
  background: var(--border-subtle);
  border: none;
}