/* Design tokens for AMD Creative Marketing
 *
 * GENERATED FILE — do not edit.
 * Source: docs/03_UI_Style_Guide.md (frontmatter)
 * Rebuild: python execution/build_tokens.py
 * Generated: 07 October 2026, 09:09
 *
 * Layer order is declared once, here, and determines precedence regardless of
 * source order or selector specificity. A utility always beats a component, a
 * component always beats a base element style, and !important is never needed.
 */

@layer reset, base, layout, components, utilities;

:root {
  /* Tells the browser which themes this site handles. Without it, mobile
   * browsers may force-darken the page themselves, which inverts text and
   * backgrounds but leaves images alone, and looks broken. */
  color-scheme: light;

  /* Brand and neutral palette: raw values, referenced only by the semantic tokens below. Components must never use these directly. */
  --brand-identity: #ff266f;
  --brand-identity-text: #d00050;
  --brand-identity-soft: #fff0f5;
  --brand-focus: #5448c8;
  --brand-focus-inverse: #8b80e8;
  --brand-action: #ffa400;
  --brand-action-hover: #e89400;
  --neutral-000: #ffffff;
  --neutral-100: #f5f5f4;
  --neutral-300: #94958a;
  --neutral-600: #3d3d3d;
  --neutral-900: #1d1d1d;

  /* Semantic colour: what components reference. Named by role, so dark mode and rebrands change values here only. */
  --color-text: var(--neutral-900);
  --color-text-muted: var(--neutral-600);
  --color-text-inverse: var(--neutral-000);
  --color-link-hover: var(--brand-identity-text);
  --color-surface-identity-soft: var(--brand-identity-soft);
  --color-surface: var(--neutral-000);
  --color-surface-sunken: var(--neutral-100);
  --color-surface-inverse: var(--neutral-900);
  --color-border: var(--neutral-300);
  --color-action: var(--brand-action);
  --color-action-hover: var(--brand-action-hover);
  --color-action-label: var(--neutral-900);
  --color-focus: var(--brand-focus);
  --color-focus-on-inverse: var(--brand-focus-inverse);
  --color-hero-overlay-strong: rgb(0 0 0 / 0.84);
  --color-hero-overlay: rgb(0 0 0 / 0.72);
  --color-hero-overlay-soft: rgb(0 0 0 / 0.34);
  --color-surface-glass: rgb(255 255 255 / 0.12);
  --color-border-inverse: rgb(255 255 255 / 0.55);

  /* Typography. Fluid steps use clamp(min, preferred, max) and need no media queries. */
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --weight-regular: 400;
  --weight-medium: 600;
  --weight-semibold: 600;
  --weight-bold: 700;
  --step--1: clamp(0.81rem, 0.79rem + 0.11vw, 0.88rem);
  --step-0: clamp(1rem, 0.98rem + 0.11vw, 1.06rem);
  --step-1: clamp(1.13rem, 1.08rem + 0.22vw, 1.25rem);
  --step-2: clamp(1.31rem, 1.25rem + 0.33vw, 1.5rem);
  --step-3: clamp(1.63rem, 1.45rem + 0.87vw, 2.13rem);
  --step-4: clamp(2rem, 1.74rem + 1.3vw, 2.75rem);
  --step-5: clamp(2.38rem, 1.98rem + 1.96vw, 3.5rem);
  --leading-tight: 1.15;
  --leading-heading: 1.25;
  --leading-body: 1.6;
  --tracking-display: -0.025em;
  --tracking-heading: -0.015em;
  --tracking-kicker: 0.05em;
  --measure: 65ch;

  /* Spacing: one proportional scale for margin, padding and gap. */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: clamp(0.50rem, 0.45rem + 0.25vw, 0.75rem);
  --space-s: clamp(0.75rem, 0.60rem + 0.50vw, 1.00rem);
  --space-m: clamp(1.00rem, 0.80rem + 1.00vw, 1.50rem);
  --space-l: clamp(1.50rem, 1.10rem + 2.00vw, 2.50rem);
  --space-xl: clamp(2.00rem, 1.40rem + 3.00vw, 4.00rem);
  --space-2xl: clamp(3.00rem, 2.00rem + 5.00vw, 6.00rem);

  /* Radius: named by role so the same value serves cards, alerts and modals. */
  --radius-surface-sm: 6px;
  --radius-surface-md: 10px;
  --radius-surface-lg: 16px;
  --radius-pill: 999px;

  /* Motion. All of it is disabled under prefers-reduced-motion below. */
  --duration-fast: 150ms;
  --duration-base: 250ms;
  --duration-slow: 400ms;
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --lift-distance: -4px;
  --reveal-distance: 1.25rem;

  /* Elevation: the only shadows the site uses, for interactive surfaces. */
  --shadow-card-hover: 0 12px 28px -12px rgb(28 25 23 / 0.22);

  /* Layout. */
  --container-max: 75rem;
  --gutter: var(--space-m);
  --aspect-video: 16 / 9;
  --aspect-social: 1.91 / 1;
  --aspect-portrait: 9 / 16;
  --aspect-square: 1 / 1;
  --touch-target: 2.75rem;
  --header-height: 4.5rem;
  --comms-height: 4.5rem;
  --content-narrow: 48rem;
  --control-border-width: 1px;
  --focus-width: 3px;
  --focus-offset: 2px;

  /* Stacking order. Components reference these; never a raw number. */
  --z-base: 0;
  --z-raised: 10;
  --z-sticky: 100;
  --z-header: 200;
  --z-commsbar: 300;
  --z-overlay: 400;
  --z-modal: 500;
  --z-toast: 600;
}


@layer base {
  *, *::before, *::after { box-sizing: border-box; }

  body {
    margin: 0;
    background: var(--color-surface);
    color: var(--color-text);
    font: var(--step-0) / var(--leading-body) var(--font-body);
  }

  h1, h2, h3 { font-family: var(--font-display); font-weight: var(--weight-regular); line-height: var(--leading-tight); }
  h1 { font-size: var(--step-4); }
  h2 { font-size: var(--step-3); }
  h3 { font-size: var(--step-2); }

  p, li { max-width: var(--measure); }
  strong, b { font-weight: var(--weight-medium); }

  a { color: var(--color-text); }
  a:hover { color: var(--color-text-muted); }

  :focus-visible {
    outline: 2px solid var(--color-focus);
    outline-offset: 2px;
  }

  img, video { max-width: 100%; height: auto; }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 0.01ms !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }
}