/*
 * ROYI Design Tokens v1.0
 * --------------------------------------------------------------------------
 * This file is the shared source of truth for new pages and incremental
 * migrations. It intentionally contains custom properties only, so loading it
 * cannot change the current layout by itself.
 */

:root {
  /* Brand */
  --ds-color-brand-navy-950: #071a2e;
  --ds-color-brand-navy-900: #0b2947;
  --ds-color-brand-navy-700: #0b3d78;
  --ds-color-brand-home-blue: #0b3a75;
  --ds-color-brand-home-blue-strong: #0a3d7c;
  --ds-color-brand-home-blue-dark: #082f5f;
  --ds-color-accent-copper: #ad6435;
  --ds-color-accent-copper-text: #8c4a24;

  /* Neutral and feedback */
  --ds-color-ink: #18212b;
  --ds-color-copy: #405264;
  --ds-color-muted: #647180;
  --ds-color-page: #f4f6f7;
  --ds-color-section: #eef3f8;
  --ds-color-surface: #ffffff;
  --ds-color-border: #d9e1ea;
  --ds-color-border-strong: #d8dde1;
  --ds-color-focus: #d98b54;
  --ds-color-success: #1f6a4a;
  --ds-color-error: #a33a32;

  /*
   * Warm compatibility palette.
   * Existing pages use this palette in their global shell. Keep these tokens
   * until each legacy section is deliberately migrated and visually approved.
   */
  --ds-color-warm-ink: #14120f;
  --ds-color-warm-copy: #39342c;
  --ds-color-warm-muted: #746c61;
  --ds-color-warm-page: #f5f0e8;
  --ds-color-warm-section: #eee5d8;
  --ds-color-warm-surface: #fffdf8;
  --ds-color-warm-border: #d9ccba;
  --ds-color-warm-accent: #9b7044;
  --ds-color-warm-accent-text: #895d36;
  --ds-color-warm-accent-soft: #c9ad86;
  --ds-color-warm-accent-hover: #754f2d;
  --ds-color-action-dark: #0d0c0b;
  --ds-color-action-dark-hover: #201a15;

  /* Typography */
  --ds-font-body-latin: Inter, "Helvetica Neue", Arial, sans-serif;
  --ds-font-display-latin: "Arial Narrow", "Avenir Next Condensed", "Roboto Condensed", "Helvetica Neue", Arial, sans-serif;
  --ds-font-body: var(--ds-font-body-latin);
  --ds-font-display: var(--ds-font-display-latin);
  --ds-font-weight-regular: 400;
  --ds-font-weight-medium: 600;
  --ds-font-weight-bold: 800;
  --ds-font-weight-black: 850;

  --ds-text-label: 0.75rem;
  --ds-text-small: 0.875rem;
  --ds-text-body: 1rem;
  --ds-text-lead: clamp(1.0625rem, 1vw + 0.75rem, 1.25rem);
  --ds-text-h3: clamp(1.3125rem, 1.1vw + 1rem, 1.75rem);
  --ds-text-h2: clamp(2rem, 2.1vw + 1rem, 3rem);
  --ds-text-h1: clamp(2.5rem, 3.5vw + 1rem, 4.5rem);
  --ds-leading-tight: 1.05;
  --ds-leading-heading: 1.12;
  --ds-leading-body: 1.65;

  /* Spacing: 4px base grid */
  --ds-space-1: 0.25rem;
  --ds-space-2: 0.5rem;
  --ds-space-3: 0.75rem;
  --ds-space-4: 1rem;
  --ds-space-5: 1.25rem;
  --ds-space-6: 1.5rem;
  --ds-space-8: 2rem;
  --ds-space-10: 2.5rem;
  --ds-space-12: 3rem;
  --ds-space-16: 4rem;
  --ds-space-20: 5rem;
  --ds-space-24: 6rem;
  --ds-space-30: 7.5rem;

  /* Layout */
  --ds-container-wide: 90rem;
  --ds-container-content: 80rem;
  --ds-container-prose: 45rem;
  --ds-gutter-desktop: 3rem;
  --ds-gutter-tablet: 2rem;
  --ds-gutter-mobile: 1.25rem;
  --ds-header-height: 4.5rem;

  /* Shape, elevation and interaction */
  --ds-radius-button: 0.5rem;
  --ds-radius-media: 0.625rem;
  --ds-radius-panel: 0.75rem;
  --ds-shadow-button: 0 16px 32px rgba(27, 21, 14, 0.12);
  --ds-shadow-header: 0 12px 30px rgba(39, 28, 18, 0.06);
  --ds-shadow-card: 0 14px 32px rgba(11, 41, 71, 0.08);
  --ds-control-height: 3rem;
  --ds-control-height-large: 3.5rem;
  --ds-target-min: 2.75rem;
  --ds-duration-fast: 180ms;
  --ds-ease-standard: cubic-bezier(0.2, 0, 0, 1);

  /* Layering */
  --ds-z-header: 40;
  --ds-z-dropdown: 50;
  --ds-z-skip-link: 60;
}