/**
 * @file
 * CourseSite Design Tokens — Luxury Bold preset.
 *
 * Extracted from the reference design (reference design).
 * All visual values flow from these tokens.
 */

:root {
  /* ── Brand ── */
  --color-primary: #9E461F;
  --color-primary-hover: #7E3416;
  --color-accent: #C8A15A;
  --color-accent-dark: #8A6A2A;
  --color-accent-medium: #B08A45;

  /* ── Surfaces ── */
  --color-page: #F4EAE0;
  --color-background: #FFF9F2;
  --color-background-alt: #FDF3E6;
  --color-background-warm: #F6E7DE;
  --color-background-gold: #F7EEDC;
  --color-surface: #FFFFFF;
  --color-surface-dark: #1C1411;

  /* ── Typography colors ── */
  --color-text-primary: #1C1411;
  --color-text-secondary: #5C514C;
  --color-text-muted: #A79A92;
  --color-text-inverse: #FFFFFF;

  /* ── Borders ── */
  --color-border: #DCCBB9;
  --color-border-accent: #E7D6B4;
  --color-border-light: #F0DDD3;

  /* ── Typography scale ── */
  --font-family-body: 'Roboto', Arial, sans-serif;
  --font-family-heading: 'Roboto', Arial, sans-serif;

  --font-size-display: 62px;
  --font-size-h1: 52px;
  --font-size-h2: 38px;
  --font-size-h2-lg: 44px;
  --font-size-h3: 21px;
  --font-size-h4: 17px;
  --font-size-body-lg: 18px;
  --font-size-body: 15px;
  --font-size-small: 14px;
  --font-size-xs: 12px;
  --font-size-2xs: 11px;

  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  --line-height-heading-tight: 1.04;
  --line-height-heading: 1.12;
  --line-height-heading-loose: 1.2;
  --line-height-body: 1.7;
  --line-height-body-relaxed: 1.85;

  --letter-spacing-display: -2.4px;
  --letter-spacing-h1: -1.9px;
  --letter-spacing-h2: -1.3px;
  --letter-spacing-h3: -0.5px;
  --letter-spacing-logo: -0.6px;
  --letter-spacing-wide: 0.5px;
  --letter-spacing-wider: 1.4px;

  /* ── Spacing ── */
  --space-2xs: 4px;
  --space-xs: 6px;
  --space-sm: 8px;
  --space-md: 10px;
  --space-base: 14px;
  --space-lg: 16px;
  --space-xl: 20px;
  --space-2xl: 22px;
  --space-3xl: 26px;
  --space-4xl: 30px;
  --space-5xl: 34px;
  --space-6xl: 40px;
  --space-7xl: 44px;
  --space-8xl: 56px;

  /* ── Section spacing ── */
  --section-space-sm: 40px;
  --section-space-md: 62px;
  --section-space-lg: 70px;
  --section-space-xl: 80px;

  /* ── Layout ── */
  --container-max-width: 1180px;
  --page-gutter: 40px;
  --page-gutter-mobile: 20px;
  --header-height: auto;

  /* ── Grid gaps ── */
  --grid-gap-xs: 10px;
  --grid-gap-sm: 14px;
  --grid-gap-md: 22px;
  --grid-gap-lg: 44px;
  --grid-gap-xl: 56px;

  /* ── Shape ── */
  --radius-xs: 10px;
  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 22px;
  --radius-xl: 24px;
  --radius-2xl: 30px;
  --radius-3xl: 32px;
  --radius-pill: 999px;

  /* ── Shadows ── */
  --shadow-sm: 0 1px 4px rgba(28, 20, 17, 0.08);
  --shadow-md: 0 12px 30px rgba(28, 20, 17, 0.12);
  --shadow-lg: 0 18px 44px rgba(28, 20, 17, 0.09);
  --shadow-xl: 0 24px 70px rgba(28, 20, 17, 0.12);
  --shadow-cta: 0 12px 26px rgba(158, 70, 31, 0.3);
  --shadow-cta-lg: 0 14px 30px rgba(158, 70, 31, 0.32);

  /* ── Transitions ── */
  --transition-fast: 150ms ease;
  --transition-base: 200ms ease;
}

/* ── Luxury Bold color set (default) ── */
[data-color-set="luxury-bold"] {
  --color-primary: #9E461F;
  --color-primary-hover: #7E3416;
  --color-accent: #C8A15A;
  --color-accent-dark: #8A6A2A;
  --color-accent-medium: #B08A45;

  --color-page: #F4EAE0;
  --color-background: #FFF9F2;
  --color-background-alt: #FDF3E6;
  --color-background-warm: #F6E7DE;
  --color-background-gold: #F7EEDC;
  --color-surface: #FFFFFF;

  --color-text-primary: #1C1411;
  --color-text-secondary: #5C514C;
  --color-text-muted: #A79A92;

  --color-border: #DCCBB9;
  --color-border-accent: #E7D6B4;
  --color-border-light: #F0DDD3;

  --shadow-cta: 0 12px 26px rgba(158, 70, 31, 0.3);
  --shadow-cta-lg: 0 14px 30px rgba(158, 70, 31, 0.32);
}

/* ── Champagne Metal ── */
[data-color-set="champagne-metal"] {
  --color-primary: #C3A35A;
  --color-primary-hover: #A98A45;
  --color-accent: #B87333;
  --color-accent-dark: #8E5928;
  --color-accent-medium: #A3662E;

  --color-page: #FFF9F0;
  --color-background: #FFF9F0;
  --color-background-alt: #FDF3E4;
  --color-background-warm: #F5EDDF;
  --color-background-gold: #F7F0DE;
  --color-surface: #FFFFFF;

  --color-text-primary: #211B17;
  --color-text-secondary: #6E665F;
  --color-text-muted: #A09889;

  --color-border: #DED2C2;
  --color-border-accent: #D4C5AE;
  --color-border-light: #EBE2D6;

  --shadow-cta: 0 12px 26px rgba(195, 163, 90, 0.3);
  --shadow-cta-lg: 0 14px 30px rgba(195, 163, 90, 0.32);
}

/* ── Forest Sage ── */
[data-color-set="forest-sage"] {
  --color-primary: #356B4E;
  --color-primary-hover: #28553D;
  --color-accent: #A7B56D;
  --color-accent-dark: #7A8A4A;
  --color-accent-medium: #919E5C;

  --color-page: #F6F8F2;
  --color-background: #F6F8F2;
  --color-background-alt: #EDF2E8;
  --color-background-warm: #E4EBE0;
  --color-background-gold: #F2F0E4;
  --color-surface: #FFFFFF;

  --color-text-primary: #18251D;
  --color-text-secondary: #5E6B62;
  --color-text-muted: #8D9A90;

  --color-border: #D4DED5;
  --color-border-accent: #C2D0C4;
  --color-border-light: #E2EAE3;

  --shadow-cta: 0 12px 26px rgba(53, 107, 78, 0.3);
  --shadow-cta-lg: 0 14px 30px rgba(53, 107, 78, 0.32);
}

/* ── Turquoise Deep ── */
[data-color-set="turquoise-deep"] {
  --color-primary: #147A78;
  --color-primary-hover: #0F625F;
  --color-accent: #B9944A;
  --color-accent-dark: #8A6F35;
  --color-accent-medium: #A6843F;

  --color-page: #F5FAF9;
  --color-background: #F5FAF9;
  --color-background-alt: #EBF5F3;
  --color-background-warm: #E2EFED;
  --color-background-gold: #F5F0E4;
  --color-surface: #FFFFFF;

  --color-text-primary: #102625;
  --color-text-secondary: #526866;
  --color-text-muted: #7A9694;

  --color-border: #C9DBD8;
  --color-border-accent: #B9CCC9;
  --color-border-light: #DCE9E7;

  --shadow-cta: 0 12px 26px rgba(20, 122, 120, 0.3);
  --shadow-cta-lg: 0 14px 30px rgba(20, 122, 120, 0.32);
}

/* ── Terracotta Ember ── */
[data-color-set="terracotta-ember"] {
  --color-primary: #A9432A;
  --color-primary-hover: #87341F;
  --color-accent: #D59B4C;
  --color-accent-dark: #A67838;
  --color-accent-medium: #C08A42;

  --color-page: #FFF7F3;
  --color-background: #FFF7F3;
  --color-background-alt: #FDEFE8;
  --color-background-warm: #F6E5DC;
  --color-background-gold: #F7EEDC;
  --color-surface: #FFFFFF;

  --color-text-primary: #261714;
  --color-text-secondary: #6F554E;
  --color-text-muted: #A08E87;

  --color-border: #E2CEC7;
  --color-border-accent: #D8C0B5;
  --color-border-light: #EDDDD6;

  --shadow-cta: 0 12px 26px rgba(169, 67, 42, 0.3);
  --shadow-cta-lg: 0 14px 30px rgba(169, 67, 42, 0.32);
}

/* ── Sandstone Luxury ── */
[data-color-set="sandstone-luxury"] {
  --color-primary: #9A6B42;
  --color-primary-hover: #7D5433;
  --color-accent: #C8A96B;
  --color-accent-dark: #9A8250;
  --color-accent-medium: #B4965D;

  --color-page: #FBF7F0;
  --color-background: #FBF7F0;
  --color-background-alt: #F5EEE3;
  --color-background-warm: #EDE4D8;
  --color-background-gold: #F5EDDB;
  --color-surface: #FFFFFF;

  --color-text-primary: #281F18;
  --color-text-secondary: #6C6258;
  --color-text-muted: #9E9488;

  --color-border: #DED2C2;
  --color-border-accent: #D2C3AE;
  --color-border-light: #EAE0D4;

  --shadow-cta: 0 12px 26px rgba(154, 107, 66, 0.3);
  --shadow-cta-lg: 0 14px 30px rgba(154, 107, 66, 0.32);
}