/* assets/css/base/variables.css — Section styles and local responsive rules. */
:root {
  --color-bg: #07090d;
  --color-bg-deep: #040507;
  --color-bg-soft: #0c1016;
  --color-surface: #10151d;
  --color-surface-soft: #141b24;
  --color-surface-strong: #19212c;
  --color-overlay: rgba(4, 5, 7, 0.82);
  --surface-card: rgba(8, 10, 14, 0.9);
  --surface-card-solid: #0b0d11;
  --surface-inset: rgba(255, 255, 255, 0.035);
  --surface-inset-soft: rgba(255, 255, 255, 0.025);
  --color-primary: #ff5a00;
  --color-primary-hover: #ff762b;
  --color-primary-dark: #c94300;
  --color-primary-soft: rgba(255, 90, 0, 0.14);
  --color-primary-medium: rgba(255, 90, 0, 0.28);
  --color-primary-strong: rgba(255, 90, 0, 0.55);
  --color-primary-faint: rgba(255, 90, 0, 0.08);
  --color-secondary: #159ee4;
  --color-secondary-hover: #38b8f5;
  --color-secondary-soft: rgba(21, 158, 228, 0.14);
  --color-text: #f4f1e9;
  --color-text-soft: #c5c7cb;
  --color-text-muted: #858b94;
  --color-text-dark: #090b0e;
  --color-white: #ffffff;
  --color-black: #000000;
  --color-border: rgba(255, 255, 255, 0.09);
  --color-border-soft: rgba(255, 255, 255, 0.05);
  --color-border-strong: rgba(255, 255, 255, 0.16);
  --color-border-primary: rgba(255, 90, 0, 0.52);
  --color-border-primary-soft: rgba(255, 90, 0, 0.13);
  --color-border-primary-subtle: rgba(255, 90, 0, 0.16);
  --color-border-primary-default: rgba(255, 90, 0, 0.18);
  --color-border-primary-medium: rgba(255, 90, 0, 0.2);
  --color-border-primary-emphasis: rgba(255, 90, 0, 0.22);
  --color-border-primary-strong: rgba(255, 90, 0, 0.24);
  --color-success: #35d07f;
  --color-warning: #f2b84b;
  --color-error: #ed4c4c;
  --font-family-base: Inter,
    Arial,
    Helvetica,
    sans-serif;
  --font-family-display: "Arial Narrow",
    "Roboto Condensed",
    Impact,
    sans-serif;
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-md: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.375rem;
  --line-height-tight: 1.08;
  --line-height-heading: 1.18;
  --line-height-base: 1.65;
  --container-width: 1240px;
  --container-padding: 1.5rem;
  --header-height: 72px;
  --section-spacing-sm: 4rem;
  --section-spacing-md: 6rem;
  --section-spacing-lg: 8rem;
  --space-1: 0.5rem;
  --space-2: 0.75rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2rem;
  --space-6: 3rem;
  --space-7: 4rem;
  --space-8: 5rem;
  --space-9: 6rem;
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-xl: 30px;
  --radius-round: 999px;
  --shadow-sm: 0 8px 20px rgba(0, 0, 0, 0.2);
  --shadow-md: 0 16px 36px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 24px 70px rgba(0, 0, 0, 0.42);
  --shadow-primary: 0 14px 34px rgba(255, 90, 0, 0.16);
  --glow-primary: 0 0 24px rgba(255, 90, 0, 0.28);
  --glow-secondary: 0 0 22px rgba(21, 158, 228, 0.24);
  --transition-fast: 160ms ease;
  --transition-medium: 300ms ease;
  --transition-slow: 600ms ease;
  --z-background: -1;
  --z-default: 1;
  --z-header: 100;
  --z-overlay: 500;
  --z-modal: 1000;
  --sidebar-width: 280px;
  --sidebar-width-large: 310px;
  --sidebar-drawer-width: min(320px, 88vw);
  --sidebar-gap: 2rem;
  --portfolio-content-gutter: 6rem;
  --project-detail-height: clamp(560px, 64vh, 610px);
  --project-detail-bottom: 0.2rem;
  --project-button-height: 36px;
  --project-button-font-size: 0.78rem;
  --project-button-radius: 7px;
  --project-action-gap: 0.65rem;
}