/* ============================================
   Design Tokens
   Imports the shared style guide directly.
   Single fixed light theme. No theme switching.
   Only site-specific overrides live here.
   ============================================ */

/* ── Style Guide Tokens (inlined — import path goes above server root) ── */
:root {
  /* Base surface */
  --themeBaseLight: #262626;
  --themeBaseLight-rgb: 38, 38, 38;
  --themeBasePrimary: #121212;
  --themeBasePrimary-rgb: 18, 18, 18;
  --themeBaseDark: #050507;
  --themeBaseDark-rgb: 5, 5, 7;
  --themeBaseBackground: #faf8f4;
  --themeBaseBackground-rgb: 250, 248, 244;
  --themeBaseSurface: #ffffff;
  --themeBaseSurface-rgb: 255, 255, 255;
  --themeBaseSurface2: #f5f1e8;
  --themeBaseSurface2-rgb: 245, 241, 232;
  --themeBaseText: #0e0e10;
  --themeBaseText-rgb: 14, 14, 16;
  --themeBaseAltText: #3f4348;
  --themeBaseAltText-rgb: 63, 67, 72;
  --themeBaseBorder: #e8e6e2;
  --themeBaseBorder-rgb: 232, 230, 226;
  --themeBaseMuted: #7c7a74;
  --themeBaseMuted-rgb: 124, 122, 116;
  --themeBasePrimaryFade: var(--themeBasePrimary);
  --themeBasePrimaryFade-rgb: var(--themeBasePrimary-rgb);
  --themeBaseLightFade: var(--themeBaseLight);
  --themeBaseLightFade-rgb: var(--themeBaseLight-rgb);
  --themeBaseDarkFade: var(--themeBaseDark);
  --themeBaseDarkFade-rgb: var(--themeBaseDark-rgb);

  /* Brand */
  --brandPrimaryLight: #ffa347;
  --brandPrimaryLight-rgb: 255, 163, 71;
  --brandPrimary: #ff7400;
  --brandPrimary-rgb: 255, 116, 0;
  --brandPrimaryDark: #bc410a;
  --brandPrimaryDark-rgb: 188, 65, 10;
  --brandDark: #bc410a;
  --brandDark-rgb: 188, 65, 10;
  --brandLight: #ffa347;
  --brandLight-rgb: 255, 163, 71;
  --brandSecondaryLight: #e0e0e0;
  --brandSecondaryLight-rgb: 224, 224, 224;
  --brandSecondary: #3f4348;
  --brandSecondary-rgb: 63, 67, 72;
  --brandSecondary2: #3f4348;
  --brandSecondary2-rgb: 63, 67, 72;
  --brandSecondaryDark: #6b6b6b;
  --brandSecondaryDark-rgb: 107, 107, 107;

  /* Status */
  --themeSuccessLight: #58d68d;
  --themeSuccessLight-rgb: 88, 214, 141;
  --themeSuccessPrimary: #2ecc71;
  --themeSuccessPrimary-rgb: 46, 204, 113;
  --themeSuccessDark: #239b56;
  --themeSuccessDark-rgb: 35, 155, 86;
  --themeWarningLight: #f8c471;
  --themeWarningLight-rgb: 248, 196, 113;
  --themeWarningPrimary: #f39c12;
  --themeWarningPrimary-rgb: 243, 156, 18;
  --themeWarningDark: #b9770e;
  --themeWarningDark-rgb: 185, 119, 14;
  --themeErrorLight: #f1948a;
  --themeErrorLight-rgb: 241, 148, 138;
  --themeErrorPrimary: #e74c3c;
  --themeErrorPrimary-rgb: 231, 76, 60;
  --themeErrorDark: #c0392b;
  --themeErrorDark-rgb: 192, 57, 43;

  /* Misc */
  --basicText: #ffffff;
  --basicText-rgb: 255, 255, 255;
  --hero: #0e0e10;
  --hero-rgb: 14, 14, 16;
  --Brand-Primary: #ff7400;
  --Primary: #ff7400;
  --boolean: true;
  --shadowOpacity: 0.25;

  /* Spacing */
  --paddingXL: 4rem;
  --paddingLG: 2rem;
  --paddingMD: 1rem;
  --paddingSM: 0.5rem;
  --paddingXS: 0.25rem;

  /* Radius */
  --noRadius: 0rem;
  --radiusXS: 0.125rem;
  --radiusSM: 0.25rem;
  --radiusMD: 0.5rem;
  --radiusLG: 0.75rem;
  --radiusXL: 1rem;
  --radiusFull: 624.9375rem;

  /* Border */
  --borderThickness: 0.125rem;

  /* Icons */
  --iconXS: 0.5rem;
  --iconSM: 1rem;
  --iconMED: 1.5rem;
  --iconLG: 2rem;
  --iconXL: 4rem;
  --iconXXL: 6rem;

  /* Inputs / buttons */
  --inputField: 3rem;
  --buttonsSmall: 1.5rem;
  --buttonsMain: 2rem;
  --buttonsLarge: 4.5rem;
  --buttonsMobileIcon: 2.75rem;

  /* Widgets */
  --widgetSmall: 2rem;
  --widgetMain: 4rem;
  --widgetLarge: 8rem;

  /* Typography scale */
  --textTitles: 6rem;
  --textSubtitle: 4rem;
  --textH1: 3rem;
  --textH2: 2.25rem;
  --textH3: 1.75rem;
  --textHeadline: 1.375rem;
  --textCallout: 0.875rem;
  --textSubhead: 1.25rem;
  --textBody: 1rem;
  --textFootnote: 0.8125rem;
  --textCaption: 0.75rem;
}

/* ── SITE-SPECIFIC TOKENS ──
   Values not covered by the style guide.
   Colors are excluded per project convention.
── */
:root {
  /* Colors */
  --brandPrimaryFade: var(--brandPrimary);
  --brandPrimaryFade-rgb: var(--brandPrimary-rgb);
  --brandPortfolioLight: var(--brandPrimaryLight);
  --brandPortfolioLight-rgb: var(--brandPrimaryLight-rgb);
  --brandPortfolioPrimary: var(--brandPrimary);
  --brandPortfolioPrimary-rgb: var(--brandPrimary-rgb);
  --brandPortfolioDark: var(--brandPrimaryDark);
  --brandPortfolioDark-rgb: var(--brandPrimaryDark-rgb);
  --brandPortfolioPrimaryFade: var(--brandPrimary);
  --brandPortfolioPrimaryFade-rgb: var(--brandPrimary-rgb);
  --bg-2: var(--themeBaseBackground);
  --bg-card: rgba(var(--themeBaseSurface-rgb), 0.25);
  --white: var(--basicText);
  --secondary: #bc410a;
  --blue: var(--brandPrimary);
  --blue-dark: var(--brandPrimaryDark);
  --blue-transparent: rgba(var(--brandPrimary-rgb), 0);
  --blue-faint: rgba(var(--brandPrimary-rgb), 0.1);
  --blue-soft: rgba(var(--brandPrimary-rgb), 0.2);
  --blue-wash: rgba(var(--brandPrimary-rgb), 0.15);
  --blue-border: rgba(var(--brandPrimary-rgb), 0.4);
  --blue-focus: rgba(var(--brandPrimary-rgb), 0.6);
  --blue-glow: rgba(var(--brandPrimary-rgb), 0.35);
  --blue-line: rgba(var(--brandPrimary-rgb), 0.7);
  --blue-section-line: rgba(var(--brandPrimary-rgb), 0.5);
  --brand-transparent: rgba(var(--brandPrimary-rgb), 0);
  --brand-faint: rgba(var(--brandPrimary-rgb), 0.1);
  --brand-soft: rgba(var(--brandPrimary-rgb), 0.2);
  --brand-wash: rgba(var(--brandPrimary-rgb), 0.15);
  --brand-border: rgba(var(--brandPrimary-rgb), 0.4);
  --brand-focus: rgba(var(--brandPrimary-rgb), 0.6);
  --brand-glow: rgba(var(--brandPrimary-rgb), 0.35);
  --brand-line: rgba(var(--brandPrimary-rgb), 0.7);
  --brand-section-line: rgba(var(--brandPrimary-rgb), 0.5);
  --rmds-elevation-0: rgba(99, 99, 99, 0.2) 0 2px 8px 0;
  --rmds-elevation-1: 0 4px 12px rgba(0, 0, 0, 0.1);
  --rmds-elevation-2: 0 6px 15px rgba(0, 0, 0, 0.21);
  --rmds-elevation-3: 0 10px 20px rgba(0, 0, 0, 0.2);
  --rmds-elevation-4: 0 15px 30px rgba(0, 0, 0, 0.2);
  --rmds-elevation-5: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  --rmds-elevation-inset:
    rgba(50, 50, 93, 0.1) 0 2px 8px -2px inset,
    rgba(0, 0, 0, 0.3) 0 4px 8px -4px inset;
  --rmds-elevation-ring-brand: 0 0 0 var(--borderThickness)
    rgba(var(--brandPrimary-rgb), 0.3);
  --shadow-color: rgba(0, 0, 0, 0.2);
  --shadow-strong: rgba(0, 0, 0, 0.3);
  --neo-shadow: rgba(30, 30, 40, 0.6);
  --shadow-soft: rgba(0, 0, 0, 0.15);

  /* Typography */
  --font: "Inter", sans-serif;
  --font-heading: "Oxygen", sans-serif;
  --textMicro: calc(var(--textCaption) * 0.18);
  --lh-micro: calc(var(--textMicro) * 1.2);

  /* Navigation */
  --nav-height: 89px;
  --nav-bg: var(--themeBaseSurface);
  --nav-bg-clear: rgba(12, 12, 16, 0);
  --nav-bg-solid: var(--themeBaseSurface);
  --nav-mobile-bg: var(--themeBaseSurface);

  /* Hero overlays */
  --transparent-dark: rgba(26, 26, 26, 0);
  --hero-overlay-strong: rgba(10, 10, 14, 0.9);
  --hero-overlay-mid: rgba(10, 10, 14, 0.6);
  --hero-overlay-light: rgba(10, 10, 14, 0.3);

  /* Forms */
  --placeholder-start: var(--themeBasePrimary);
  --placeholder-end: var(--themeBaseDark);
  --field-bg: var(--themeBasePrimary);
  --field-border: var(--themeBaseBorder);
  --field-shadow: rgba(0, 0, 0, 0.4);

  /* Layout */
  --container-pad: 128px;
  --container-max: 1664px;
  --content-max: 900px;
  --content-max-md: 700px;
  --content-max-sm: calc(var(--content-max-md) / 2);

  /* Sizing */
  --size-xxs: 6px;
  --size-control: var(--inputField);
  --size-icon-lg: 44px;
  --size-rule: 512px;

  /* Navigation sizing */
  --size-nav-brand-min: 250px;
  --size-nav-ruler-w: 728px;
  --size-nav-meta-max: 260px;
  --size-nav-meta-copy: 128px;
  --size-nav-chevron: 14px;
  --nav-chevron-1: -18px;
  --nav-chevron-2: -26px;

  /* Misc sizing */
  --size-icon-xs: 28px;
  --btn-compact-w: 135px;
  --btn-wide-w: 256px;
  --size-job-sidebar: 256px;
  --size-job-sidebar-sm: 200px;
  --home-diagonal-run: 45.5%;
  --home-diagonal-anchor: 55%;

  /* Motion */
  --ease: ease-in-out;
  --trans: 0.3s var(--ease);
  --trans-fast: 0.3s var(--ease);

  /* Letter-spacing */
  --ls-hero: 0.15em;
  --ls-label: 0.1em;
  --ls-link: 0.08em;
  --ls-btn: 0.05em;
  --ls-caps: 0.02em;
  --ls-logo: 0.005em;
  --ls-heading: -0.02em;
  --ls-title: -0.01em;
  --ls-display: -0.06rem;
  --ls-display-sm: -0.03rem;

  /* Interaction */
  --hover-lift: -4px;
  --bio-pullup: -20px;
  --watermark-offset: calc(var(--paddingLG) * -2);
  --mark-offset: var(--size-icon-lg);
  --size-hex-w: 218px;
  --size-hex-h: 196px;
  --size-hex-sm-w: 110px;
  --size-hex-sm-h: 94px;
  --content-max-vision: 900px;
  --size-logo-h: 50px;
  --min-textarea-h: 220px;
  --min-photo-h: 140px;
  --min-photo-h-lg: 200px;

  /* Shimmer */
  --shimmer-edge: rgba(255, 255, 255, 0.16);
  --shimmer-peak: rgba(255, 255, 255, 0.95);
  --shimmer-glow: rgba(255, 255, 255, 0.75);

  /* Testimonial quote mark */
  --quote-mark-top: -30px;
  --quote-mark-left: -20px;

  /* Legacy */
  --Theme-Base-Surface: rgba(38, 38, 38, 0.8);
  --Padding-LG: var(--paddingLG);

  --pageTitle: 320px;

  /* Responsive sizing defaults: mobile */
  --paddingXL: 2.5rem;
  --paddingLG: 1.5rem;
  --paddingMD: 1rem;
  --paddingSM: 0.5rem;
  --paddingXS: 0.25rem;

  --iconXS: 0.5rem;
  --iconSM: 0.875rem;
  --iconMED: 1.25rem;
  --iconLG: 1.75rem;
  --iconXL: 3rem;
  --iconXXL: 4rem;

  --inputField: 2.75rem;
  --buttonsSmall: 1.25rem;
  --buttonsMain: 1.75rem;
  --buttonsLarge: 3.5rem;
  --buttonsMobileIcon: 2.75rem;

  --widgetSmall: 1.75rem;
  --widgetMain: 3rem;
  --widgetLarge: 5rem;

  --textTitles: 3rem;
  --textSubtitle: 2.5rem;
  --textH1: 2.25rem;
  --textH2: 1.75rem;
  --textH3: 1.5rem;
  --textHeadline: 1.125rem;
  --textCallout: 0.875rem;
  --textSubhead: 1.125rem;
  --textBody: 1rem;
  --textFootnote: 0.8125rem;
  --textCaption: 0.75rem;

  --nav-height: 72px;
  --container-pad: var(--paddingMD);
  --container-max: 100%;
  --content-max: 100%;
  --content-max-md: 100%;
  --content-max-sm: 100%;

  --size-xxs: 4px;
  --size-control: var(--inputField);
  --size-icon-lg: 40px;
  --size-rule: 100%;
  --size-nav-brand-min: 180px;
  --size-nav-ruler-w: 100%;
  --size-nav-meta-max: 220px;
  --size-nav-meta-copy: 112px;
  --size-nav-chevron: 12px;
  --nav-chevron-1: -14px;
  --nav-chevron-2: -20px;
  --size-icon-xs: 24px;
  --btn-compact-w: 120px;
  --btn-wide-w: 100%;
  --size-job-sidebar: 100%;
  --size-job-sidebar-sm: 100%;
  --mark-offset: var(--size-icon-lg);
  --size-hex-w: 160px;
  --size-hex-h: 144px;
  --size-hex-sm-w: 88px;
  --size-hex-sm-h: 76px;
  --size-logo-h: 40px;
  --min-textarea-h: 180px;
  --min-photo-h: 120px;
  --min-photo-h-lg: 160px;
  --pageTitle: 240px;

  --page-columns: 1fr;
}

@media (min-width: 768px) {
  :root {
    --paddingXL: 3rem;
    --paddingLG: 1.75rem;
    --paddingMD: 1rem;
    --paddingSM: 0.5rem;
    --paddingXS: 0.25rem;

    --iconSM: 1rem;
    --iconMED: 1.375rem;
    --iconLG: 1.875rem;
    --iconXL: 3.5rem;
    --iconXXL: 5rem;

    --inputField: 2.875rem;
    --buttonsSmall: 1.375rem;
    --buttonsMain: 1.875rem;
    --buttonsLarge: 4rem;

    --widgetSmall: 1.875rem;
    --widgetMain: 3.5rem;
    --widgetLarge: 6rem;

    --textTitles: 4.5rem;
    --textSubtitle: 3.25rem;
    --textH1: 2.5rem;
    --textH2: 2rem;
    --textH3: 1.625rem;
    --textHeadline: 1.25rem;
    --textSubhead: 1.1875rem;

    --nav-height: 80px;
    --container-pad: var(--paddingXL);
    --container-max: 1664px;
    --content-max: 900px;
    --content-max-md: 700px;
    --content-max-sm: calc(var(--content-max-md) / 2);

    --size-xxs: 5px;
    --size-control: var(--inputField);
    --size-icon-lg: 42px;
    --size-rule: 384px;
    --size-nav-brand-min: 220px;
    --size-nav-ruler-w: 560px;
    --size-nav-meta-max: 240px;
    --size-nav-meta-copy: 120px;
    --size-nav-chevron: 13px;
    --nav-chevron-1: -16px;
    --nav-chevron-2: -23px;
    --size-icon-xs: 26px;
    --btn-compact-w: 128px;
    --btn-wide-w: 220px;
    --size-job-sidebar: 240px;
    --size-job-sidebar-sm: 190px;
    --size-hex-w: 190px;
    --size-hex-h: 170px;
    --size-hex-sm-w: 100px;
    --size-hex-sm-h: 86px;
    --size-logo-h: 46px;
    --min-textarea-h: 200px;
    --min-photo-h: 132px;
    --min-photo-h-lg: 180px;
    --pageTitle: 280px;

    --page-columns: 240px 1fr;
  }
}

@media (min-width: 1200px) {
  :root {
    --paddingXL: 4rem;
    --paddingLG: 2rem;
    --paddingMD: 1rem;
    --paddingSM: 0.5rem;
    --paddingXS: 0.25rem;

    --iconXS: 0.5rem;
    --iconSM: 1rem;
    --iconMED: 1.5rem;
    --iconLG: 2rem;
    --iconXL: 4rem;
    --iconXXL: 6rem;

    --inputField: 3rem;
    --buttonsSmall: 1.5rem;
    --buttonsMain: 2rem;
    --buttonsLarge: 4.5rem;
    --buttonsMobileIcon: 2.75rem;

    --widgetSmall: 2rem;
    --widgetMain: 4rem;
    --widgetLarge: 8rem;

    --textTitles: 6rem;
    --textSubtitle: 4rem;
    --textH1: 3rem;
    --textH2: 2.25rem;
    --textH3: 1.75rem;
    --textHeadline: 1.375rem;
    --textCallout: 0.875rem;
    --textSubhead: 1.25rem;
    --textBody: 1rem;
    --textFootnote: 0.8125rem;
    --textCaption: 0.75rem;

    --nav-height: 89px;
    --container-pad: 128px;
    --container-max: 1664px;
    --content-max: 900px;
    --content-max-md: 700px;
    --content-max-sm: calc(var(--content-max-md) / 2);

    --size-xxs: 6px;
    --size-control: var(--inputField);
    --size-icon-lg: 44px;
    --size-rule: 512px;
    --size-nav-brand-min: 250px;
    --size-nav-ruler-w: 728px;
    --size-nav-meta-max: 260px;
    --size-nav-meta-copy: 128px;
    --size-nav-chevron: 14px;
    --nav-chevron-1: -18px;
    --nav-chevron-2: -26px;
    --size-icon-xs: 28px;
    --btn-compact-w: 135px;
    --btn-wide-w: 256px;
    --size-job-sidebar: 256px;
    --size-job-sidebar-sm: 200px;
    --mark-offset: var(--size-icon-lg);
    --size-hex-w: 218px;
    --size-hex-h: 196px;
    --size-hex-sm-w: 110px;
    --size-hex-sm-h: 94px;
    --size-logo-h: 50px;
    --min-textarea-h: 220px;
    --min-photo-h: 140px;
    --min-photo-h-lg: 200px;
    --pageTitle: 320px;

    --page-columns: 280px 2fr 1fr;
  }
}