/*
  Design tokens — shared across every landing page in this repo.
  Two layers:
   1. SYSTEM tokens: generic scales (type, space, radius, shadow, motion).
      Brand-agnostic. Reuse as-is on any future page.
   2. BRAND tokens: Braz-specific values (color palette, font).
      Swap this block only when starting a landing page for another brand.
  Derived from shift_design_system/foundations/tokens/braz (Ubuntu typeface,
  brand gold #DA9502, spacing/radius/shadow scales), adapted into a dark,
  editorial theme for marketing pages.
*/

:root {
  /* ---------- SYSTEM: type scale ---------- */
  --text-2xs: 0.6875rem;   /* 11px */
  --text-xs: 0.8125rem;    /* 13px */
  --text-sm: 0.9375rem;    /* 15px */
  --text-base: 1.0625rem;  /* 17px */
  --text-md: 1.25rem;      /* 20px */
  --text-lg: 1.5rem;       /* 24px */
  --text-xl: 1.875rem;     /* 30px */
  --text-2xl: 2.375rem;    /* 38px */
  --text-3xl: clamp(2.5rem, 1.9rem + 2.5vw, 3.5rem);
  --text-4xl: clamp(2.75rem, 1.8rem + 4vw, 4.5rem);

  /* ---------- SYSTEM: weights ---------- */
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* ---------- SYSTEM: spacing scale ---------- */
  --space-1: 0.5rem;   /* 8 */
  --space-2: 0.75rem;  /* 12 */
  --space-3: 1rem;     /* 16 */
  --space-4: 1.25rem;  /* 20 */
  --space-5: 1.5rem;   /* 24 */
  --space-6: 2rem;     /* 32 */
  --space-7: 2.5rem;   /* 40 */
  --space-8: 3rem;     /* 48 */
  --space-9: 3.5rem;   /* 56 */
  --space-10: 4rem;    /* 64 */
  --space-11: 4.5rem;  /* 72 */
  --space-12: 5rem;    /* 80 */
  --space-14: 6rem;    /* 96 */

  /* ---------- SYSTEM: radius scale ---------- */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 1000px;
  --radius-btn-sm: 12px;
  --radius-btn-md: 18px;
  --radius-btn-lg: 26px;

  /* ---------- SYSTEM: elevation ---------- */
  --shadow-sm: 0 6px 16px -6px rgb(0 0 0 / 0.35);
  --shadow-md: 0 16px 32px -10px rgb(0 0 0 / 0.45);
  --shadow-lg: 0 30px 60px -16px rgb(0 0 0 / 0.55);
  --shadow-glow: 0 0 0 1px rgb(218 149 2 / 0.25), 0 12px 30px -8px rgb(218 149 2 / 0.35);

  /* ---------- SYSTEM: motion ---------- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 180ms;
  --dur-base: 400ms;
  --dur-slow: 800ms;

  /* ---------- SYSTEM: layout ---------- */
  --container-max: 1180px;
  --container-pad: clamp(1.25rem, 4vw, 3rem);

  /* ================= BRAND: Braz ================= */
  --font-family: 'Ubuntu', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --color-canvas: #120d16;
  --color-canvas-alt: #180f1e;
  --color-surface: #1e1624;
  --color-surface-raised: #29202f;
  --color-surface-translucent: rgb(255 255 255 / 0.045);
  --color-border: rgb(255 255 255 / 0.10);
  --color-border-strong: rgb(255 255 255 / 0.20);

  --color-brand: #da9502;
  --color-brand-hover: #b8730a;
  --color-brand-active: #8a5500;
  --color-brand-soft: rgb(218 149 2 / 0.14);
  --color-brand-light: #e8b76a;

  --color-text-primary: #ffffff;
  --color-text-secondary: rgb(255 255 255 / 0.72);
  --color-text-tertiary: rgb(255 255 255 / 0.50);
  --color-text-on-brand: #ffffff;

  --gradient-canvas:
    radial-gradient(60% 50% at 82% -6%, rgb(218 149 2 / 0.24), transparent 60%),
    radial-gradient(45% 40% at 8% 8%, rgb(122 60 150 / 0.28), transparent 65%),
    linear-gradient(180deg, var(--color-canvas-alt), var(--color-canvas) 40%);
}