/**
 * Design tokens
 *
 * Primitive tokens describe the visual scale. Semantic tokens describe intent.
 * Components should prefer semantic tokens whenever one is available.
 */

:root {
  /* Brand palette */
  --color-deep-graphite: #211d24;
  --color-graphite: #37323c;
  --color-bronze: #8a5a2e;
  --color-copper: #c87f4a;
  --color-light-copper: #e3a76f;
  --color-orange: #ff9f40;
  --color-sand: #efe9e1;
  --color-bone: #fbf9f6;
  --color-dark-graphite: #151417;
  --color-white: #ffffff;
  --color-black: #000000;
  --color-transparent: transparent;

  /* Status palette */
  --color-success-dark: #235c45;
  --color-success: #347a5c;
  --color-success-light: #dcece4;
  --color-info-dark: #2f5870;
  --color-info: #4f7f99;
  --color-info-light: #dfeaf0;
  --color-warning-dark: #80551e;
  --color-warning: #c18435;
  --color-warning-light: #f5e8cf;
  --color-danger-dark: #7b3438;
  --color-danger: #b65358;
  --color-danger-light: #f2ddde;
  --color-alert-dark: var(--color-danger-dark);
  --color-alert: var(--color-danger);
  --color-alert-light: var(--color-danger-light);

  /* Alpha colors */
  --color-graphite-96: rgb(33 29 36 / 96%);
  --color-graphite-22: rgb(55 50 60 / 22%);
  --color-graphite-12: rgb(33 29 36 / 12%);
  --color-orange-32: rgb(255 159 64 / 32%);
  --color-bone-75: rgb(251 249 246 / 75%);
  --color-bone-64: rgb(251 249 246 / 64%);
  --color-bone-15: rgb(251 249 246 / 15%);
  --color-bone-12: rgb(251 249 246 / 12%);
  --color-white-06: rgb(255 255 255 / 6%);

  /* Semantic colors */
  --color-background: var(--color-bone);
  --color-surface: var(--color-white);
  --color-surface-subtle: var(--color-sand);
  --color-surface-dark: var(--color-deep-graphite);
  --color-surface-dark-raised: var(--color-graphite);
  --color-text: var(--color-deep-graphite);
  --color-text-muted: var(--color-graphite);
  --color-text-inverse: var(--color-bone);
  --color-text-inverse-muted: var(--color-bone-75);
  --color-border: var(--color-graphite-22);
  --color-border-inverse: var(--color-bone-15);
  --color-accent: var(--color-orange);
  --color-link: var(--color-bronze);
  --color-link-hover: var(--color-copper);
  --color-focus: var(--color-orange);

  /* Gradients */
  --gradient-brand: linear-gradient(
    135deg,
    var(--color-bronze),
    var(--color-orange)
  );
  --gradient-copper: linear-gradient(
    135deg,
    var(--color-bronze),
    var(--color-light-copper)
  );
  --gradient-dark: linear-gradient(
    135deg,
    var(--color-deep-graphite),
    var(--color-graphite)
  );
  --gradient-sand: linear-gradient(
    135deg,
    var(--color-bone),
    var(--color-sand)
  );
  --gradient-success: linear-gradient(
    135deg,
    var(--color-success-dark),
    var(--color-success)
  );
  --gradient-warning: linear-gradient(
    135deg,
    var(--color-warning-dark),
    var(--color-warning)
  );
  --gradient-danger: linear-gradient(
    135deg,
    var(--color-danger-dark),
    var(--color-danger)
  );
  --gradient-overlay-dark: linear-gradient(
    180deg,
    var(--color-transparent),
    var(--color-graphite-96)
  );

  /* Font families */
  --font-family-body:
    "SF Pro Text", "SF Pro Display", Roboto, Arial, sans-serif;
  --font-family-heading:
    "Space Grotesk", "SF Pro Display", Roboto, Arial, sans-serif;

  /* Font sizes */
  --font-size-xs: clamp(0.78rem, 0.75rem + 0.12vw, 0.88rem);
  --font-size-sm: clamp(0.9rem, 0.87rem + 0.12vw, 1rem);
  --font-size-md: clamp(1rem, 0.96rem + 0.18vw, 1.125rem);
  --font-size-lg: clamp(1.25rem, 1.12rem + 0.55vw, 1.625rem);
  --font-size-xl: clamp(1.6rem, 1.35rem + 1vw, 2.25rem);
  --font-size-2xl: clamp(2.1rem, 1.65rem + 1.8vw, 3.25rem);
  --font-size-3xl: clamp(2.75rem, 2rem + 3vw, 4.8rem);

  /* Font weights and rhythm */
  --font-weight-thin: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extra-bold: 750;
  --line-height-tight: 1.08;
  --line-height-heading: 1.2;
  --line-height-body: 1.6;
  --letter-spacing-tight: -0.025em;
  --letter-spacing-wide: 0.08em;
  --letter-spacing-wider: 0.14em;

  /* Spacing */
  --space-0: 0;
  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: clamp(4rem, 8vw, 8rem);
  --page-gutter: 1.5rem;
  --page-gutter-mobile: 1rem;

  /* Layout */
  --width-content: 52rem;
  --width-wide: 75rem;
  --width-sidebar-min: 15rem;
  --width-sidebar-max: 22rem;
  --width-menu: 36rem;
  --width-submenu: 14rem;
  --width-search: 34rem;
  --width-footer-column: 8rem;
  --width-widget: 14rem;
  --height-header: 5rem;
  --height-header-mobile: 4.5rem;
  --height-logo: 2.2rem;
  --width-logo: 13rem;
  --height-viewport-content: 60vh;

  /* Borders and radii */
  --border-width: 1px;
  --border-width-accent: 2px;
  --focus-width: 3px;
  --radius-xs: 0.25rem;
  --radius-sm: 0.375rem;
  --radius-md: 0.75rem;
  --radius-lg: 1.25rem;
  --radius-xl: 2rem;
  --radius-round: 999rem;

  /* Shadows and effects */
  --shadow-sm: 0 0.25rem 1rem var(--color-graphite-12);
  --shadow-md: 0 1.25rem 3.75rem var(--color-graphite-12);
  --blur-header: 1rem;

  /* Motion */
  --duration-fast: 180ms;
  --duration-normal: 320ms;
  --duration-slow: 600ms;
  --duration-stagger: 40ms;
  --ease-standard: ease;
  --ease-emphasized: cubic-bezier(0.22, 1, 0.36, 1);
  --transition-fast: var(--duration-fast) var(--ease-standard);
  --transition-normal: var(--duration-normal) var(--ease-emphasized);
  --transition-slow: var(--duration-slow) var(--ease-emphasized);

  /* Layers */
  --z-header: 1000;
  --z-navigation: 1001;
  --z-menu-toggle: 1002;
  --z-accessibility: 100000;

  /* WordPress admin bar */
  --admin-bar-height: 32px;
  --admin-bar-height-mobile: 46px;
}