/* Font Face - Geist Mono (self-hosted) + Inter (Google Fonts) */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400&display=swap');

@font-face {
  font-family: "Geist Mono";
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url('./assets/fonts/geist-mono-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Geist Mono";
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url('./assets/fonts/geist-mono-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-0302, U+0304-0308, U+030A-0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Design System Variables */

:root {
  /* Brand */
  --accent: #FC5113;
  --color-lightest: #FFFFFF;

  /* Core palette (5 colors only) */
  --color-primary: #141414;
  --color-gray-lg: #8C8C8C;
  --color-gray-md: #B4B4B4;
  --color-gray-sm: var(--color-lightest);

  /* Semantic colors */
  --color-bg: var(--color-gray-sm);
  --color-surface: #FAFAFA;
  --color-surface-muted: #F5F5F5;
  --color-surface-elevated: var(--color-lightest);
  --color-surface-contrast: var(--color-primary);
  --color-border: var(--color-gray-md);
  --color-text-primary: var(--color-primary);
  /* Long-form body: softer than headings, stronger than secondary (captions, de-emphasis) */
  --color-text-prose: #353535;
  --color-text-secondary: #6E6E6E;
  --color-text-tertiary: var(--color-gray-md);
  --color-text-meta: #9F9F9F;
  --color-text-inverse: #FFFFFF;
  --color-overlay: rgba(20, 20, 20, 0.8);
  --color-overlay-strong: rgba(20, 20, 20, 0.9);
  --color-overlay-dropdown: rgba(20, 20, 20, 0.56);
  --color-accent-soft: rgba(252, 81, 19, 0.18);

  /* Typography */
  --letter-bing-0: 0px;
  --letter-spacing-20: -0.2px;
  --letter-spacing-25: -0.25px;
  --letter-spacing-50: -0.5px;
  --letter-spacing-100: -1px;
  --letter-spacing-200: -2px;

  --body-1-font-family: "Suisse Int'l", "Inter", sans-serif;
  --body-1-font-size: 18px;
  --body-1-line-height: 26px;
  --body-1-letter-spacing: var(--letter-spacing-25);
  --body-1-weight-regular: 400;

  --body-2-font-family: "Suisse Int'l", "Inter", sans-serif;
  --body-2-font-size: 16px;
  --body-2-line-height: 23px;
  --body-2-letter-spacing: var(--letter-spacing-20);
  /* Long-form prose: slightly tighter tracking than zero */
  --writing-article-body-letter-spacing: var(--letter-spacing-20);
  /* ~15% looser than body-2 for long reads */
  --writing-article-body-line-height: calc(var(--body-2-line-height) * 1.15);
  --body-2-weight-regular: 400;

  --body-3-font-family: "Suisse Int'l", "Inter", sans-serif;
  --body-3-font-size: 14px;
  --body-3-line-height: 20px;
  --body-3-letter-spacing: var(--letter-spacing-20);
  --body-3-weight-regular: 400;

  --label-2-font-family: "Suisse Int'l", "Inter", sans-serif;
  --label-2-font-size: 15px;
  --label-2-line-height: 120%;
  --label-2-letter-spacing: var(--letter-spacing-25);
  --label-2-weight-regular: 400;

  --label-3-font-family: "Suisse Int'l", "Inter", sans-serif;
  --label-3-font-size: 14px;
  --label-3-line-height: 120%;
  --label-3-letter-spacing: var(--letter-spacing-20);
  --label-3-weight-regular: 400;

  --label-heading-font-family: "Geist Mono", monospace;
  --label-heading-font-size: 12px;
  --label-heading-line-height: 120%;
  --label-heading-letter-spacing: var(--letter-spacing-25);
  --label-heading-weight-regular: 400;

  --label-heading-sm-font-family: "Geist Mono", monospace;
  --label-heading-sm-font-size: 13px;
  --label-heading-sm-line-height: 120%;
  --label-heading-sm-letter-spacing: var(--letter-spacing-25);
  --label-heading-sm-weight-regular: 400;

  --weight-regular: 400;

  /* Display type */
  --display-lg-font-size: 24px;
  --display-lg-line-height: 120%;
  --display-md-font-size: 22px;
  --display-md-line-height: 120%;
  --display-sm-font-size: 20px;
  --display-sm-line-height: 120%;

  /* Standardized line-height tokens */
  --line-height-tight: 120%;
  --line-height-normal: 20px;
  --line-height-relaxed: 20px;

  /* Standardized letter-spacing tokens */
  --letter-spacing-tight: var(--letter-spacing-50);
  --letter-spacing-normal: var(--letter-spacing-25);
  --letter-spacing-wide: var(--letter-spacing-0);

  /* Breakpoints (for reference - used in media queries) */
  /* --bp-desktop-lg: 1440px;  Large desktop */
  /* --bp-desktop: 1280px;     Desktop */
  /* --bp-tablet-lg: 1024px;   Tablet landscape */
  /* --bp-tablet: 768px;       Tablet portrait */
  /* --bp-mobile: 480px;       Mobile */

  /* Spacing scale (4px base) */
  --spacing-0: 0;
  --spacing-1: 4px;
  --spacing-2: 8px;
  --spacing-3: 12px;
  --spacing-4: 16px;
  --spacing-5: 20px;
  --spacing-6: 24px;
  --spacing-8: 32px;
  --spacing-10: 40px;
  --spacing-12: 48px;
  --spacing-14: 56px;
  --spacing-16: 64px;
  --spacing-20: 80px;
  --spacing-24: 96px;

  /* Project detail: gap between tags and controls (1.5x section gap) */
  --spacing-project-controls-margin-top: var(--spacing-14);

  /* Layout */
  --grid-container-width: 1280px;
  --grid-margin: var(--spacing-8);
  --grid-gutter: var(--spacing-8);
  --grid-columns: 12;
  --grid-content-width: calc(var(--grid-container-width) - (var(--grid-margin) * 2));
  --grid-column-width: calc((var(--grid-content-width) - (var(--grid-gutter) * 11)) / 12);
  --content-width-narrow: 680px;
  --content-width-medium: 800px;
  --content-column-sm: 100px;
  --content-column-md: 187px;
  --page-padding-top: var(--spacing-16);
  --page-padding-bottom: var(--spacing-8);
  --section-gap: var(--spacing-8);
  --section-gap-large: var(--spacing-12);
  --section-list-overlay-max-height: 50vh;
  --intro-text-measure: 100%;
  --intro-panel-padding-inline-end: var(--spacing-0);
  --intro-block-gap: var(--spacing-3);
  --intro-copy-font-size: 13px;
  --intro-copy-line-height: 18px;
  --intro-lead-font-size: 14px;
  --intro-lead-line-height: 20px;

  /* Icon & control sizes */
  --icon-sm: 12px;
  --icon-md: 16px;
  --icon-lg: 20px;
  --size-touch-target: 44px;
  --size-nav-toggle-gap: 5px;
  --size-nav-icon-width: 18px;
  --size-nav-icon-height: 2px;
  --size-nav-icon-radius: 1px;
  --size-nav-icon-shift: 7px;
  --size-filter-fade-width: 48px;
  --size-project-list-media-col: 280px;
  --size-project-list-media-col-compact: 240px;
  --size-hover-preview-width: 400px;
  --size-hover-preview-height: 300px;
  --size-project-nav-split-gap: var(--spacing-4);
  --size-project-nav-sidebar-width: clamp(248px, 22vw, 320px);
  --size-project-nav-sidebar-width-tablet: clamp(200px, 28vw, 248px);
  --size-project-nav-sticky-top: var(--spacing-4);
  --size-panel-sticky-top: var(--spacing-4);
  --size-project-nav-card-media-aspect: 908 / 520;
  --size-project-nav-overview-media-aspect: 292 / 220;
  --size-modal-max-width: 960px;
  --size-close-icon: 28px;
  --size-nav-menu-link-min-height: 48px;
  --size-mobile-bottom-nav-reserve: calc(var(--size-touch-target) + var(--spacing-12) + env(safe-area-inset-bottom, 0px));

  /* Radius */
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 8px;
  --radius-pill: 999px;

  /* Border */
  --border-width: 1px;
  --border-style: solid;
  --border-color: var(--color-border);
  --border: var(--border-width) var(--border-style) var(--border-color);

  /* Opacity */
  --opacity-hover-subtle: 0.85;
  --opacity-hover-strong: 0.55;
  --opacity-project-card-idle: 0.78;
  --opacity-project-card-active: 1;

  /* Motion */
  --duration-fast: 0.15s;
  --duration-base: 0.3s;
  --easing-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --easing-enter: cubic-bezier(0.23, 0.98, 0.56, 1);
  /* Page entrance: gentle ease-out with no flat tail (the front-loaded --easing-enter
     reached ~98% in the first ~23% of the duration, reading as "snap then stall"). */
  --easing-page-enter: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --transition-color: color var(--duration-fast) var(--easing-standard), background-color var(--duration-fast) var(--easing-standard), border-color var(--duration-fast) var(--easing-standard);
  --transition-opacity: opacity var(--duration-fast) var(--easing-standard);
  --transition-transform: transform var(--duration-fast) var(--easing-standard);

  /* Writing article: staggered paragraph reveal (opacity + slower transform ≈ parallax depth) */
  --writing-para-reveal-distance: var(--spacing-8);
  --writing-para-reveal-opacity-duration: 0.52s;
  --writing-para-reveal-transform-duration: 0.78s;
  --writing-para-reveal-stagger: 72ms;

  /* Focus */
  --focus-ring-width: 2px;
  --focus-ring-color: var(--accent);
  --focus-ring-offset: 2px;

  /* Shadows */
  --shadow-modal: 0 8px 32px rgba(0, 0, 0, 0.2);
  --shadow-modal-dark: 0 8px 32px rgba(255, 255, 255, 0.1);
  --shadow-soft: 0 8px 24px rgba(0, 0, 0, 0.06);
  --shadow-soft-dark: 0 8px 24px rgba(0, 0, 0, 0.35);

}

[data-theme="dark"] {
  --color-bg: var(--color-primary);
  --color-bg-darker: #0E0E0E;
  --color-surface: #1A1A1A;
  --color-surface-muted: #222222;
  --color-surface-elevated: #181818;
  --color-surface-contrast: #FFFFFF;
  --color-border: #2A2A2A;
  --color-text-primary: var(--color-gray-sm);
  --color-text-prose: #D6D6D6;
  --color-text-secondary: var(--color-gray-lg);
  --color-text-tertiary: #555555;
  --color-text-meta: #6A6A6A;
  --color-text-inverse: var(--color-primary);
  --color-overlay: rgba(0, 0, 0, 0.9);
  --color-overlay-strong: rgba(0, 0, 0, 0.95);
  --color-overlay-dropdown: rgba(0, 0, 0, 0.64);
  --color-accent-soft: rgba(252, 81, 19, 0.24);
}