/* ============================================================
   OPHICA CONSULTING — DESIGN TOKENS
   Strict adherence to locked color palette, typography & spacing
   ============================================================ */

:root {
  /* Brand Color Palette */
  --color-orange: #EF5B3F;
  --color-orange-dark: #D94B31;
  --color-black: #111111;
  --color-dark: #171717;
  --color-text: #111111;
  --color-muted: #707070;
  --color-muted-secondary: #AAAAAA;
  --color-border: #DFDCD6;
  --color-border-dark: #383838;
  --color-paper: #FEFEFD;
  --color-white: #FFFFFF;
  --color-surface-card: #FFFFFF;
  --color-surface-dark: #171717;

  /* Typography - Desktop Scale */
  --font-family-base: 'Plus Jakarta Sans', Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --type-h1-size: 64px;
  --type-h1-weight: 800;
  --type-h1-line: 1.02;
  --type-h1-tracking: -0.05em;

  --type-h2-size: 48px;
  --type-h2-weight: 800;
  --type-h2-line: 1.05;
  --type-h2-tracking: -0.045em;

  --type-h3-size: 30px;
  --type-h3-weight: 800;
  --type-h3-line: 1.15;
  --type-h3-tracking: -0.03em;

  --type-h4-size: 20px;
  --type-h4-weight: 750;
  --type-h4-line: 1.25;
  --type-h4-tracking: -0.01em;

  --type-lead-size: 19px;
  --type-lead-weight: 400;
  --type-lead-line: 1.5;

  --type-body-size: 16px;
  --type-body-weight: 400;
  --type-body-line: 1.55;

  --type-btn-size: 15px;
  --type-btn-weight: 700;
  --type-btn-line: 1.2;

  --type-caption-size: 13px;
  --type-caption-weight: 700;
  --type-caption-line: 1.3;

  --type-eyebrow-size: 12px;
  --type-eyebrow-weight: 800;
  --type-eyebrow-line: 1.3;
  --type-eyebrow-tracking: 0.14em;

  /* Spacing Rhythm */
  --section-padding-desktop: 85px;
  --section-padding-tablet: 70px;
  --section-padding-mobile: 56px;
  --section-padding-small: 48px;

  /* Eyebrow Line Dimensions */
  --eyebrow-line-width-desktop: 58px;
  --eyebrow-line-width-mobile: 38px;
  --eyebrow-line-height: 2px;

  /* Layout Boundaries */
  --container-max-width: 1240px;
  --container-padding-desktop: 24px;
  --container-padding-tablet: 32px;
  --container-padding-mobile: 20px;
  --container-padding-small: 16px;

  /* Component Dimensions & Radii */
  --header-height-desktop: 80px;
  --header-height-mobile: 66px;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-full: 9999px;

  /* Transitions */
  --transition-fast: 0.2s ease;
  --transition-normal: 0.28s ease;
  --transition-smooth: 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
  --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 12px 30px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.12);
}

@media (max-width: 768px) {
  :root {
    --type-h1-size: 42px;
    --type-h1-line: 1.03;
    --type-h1-tracking: -0.04em;

    --type-h2-size: 36px;
    --type-h2-line: 1.08;
    --type-h2-tracking: -0.035em;

    --type-h3-size: 26px;
    --type-h3-line: 1.15;
    --type-h3-tracking: -0.025em;

    --type-h4-size: 19px;
    --type-h4-line: 1.25;

    --type-lead-size: 18px;
    --type-lead-line: 1.5;

    --type-body-size: 16px;
    --type-body-line: 1.55;

    --type-btn-size: 15px;
    --type-btn-line: 1.2;

    --type-caption-size: 13px;
    --type-caption-line: 1.3;

    --type-eyebrow-size: 11px;
    --type-eyebrow-line: 1.3;
    --type-eyebrow-tracking: 0.13em;
  }
}

@media (max-width: 390px) {
  :root {
    --type-h1-size: 38px;
    --type-h2-size: 32px;
    --type-h3-size: 24px;
  }
}