/* RevDex Design System — source of truth
   Architecture: primitive -> semantic -> component */

@font-face {
  font-family: "Panchang";
  src: url("./assets/fonts/Panchang-Variable.woff2") format("woff2-variations");
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
}

@font-face {
  font-family: "Satoshi";
  src: url("./assets/fonts/Satoshi-Variable.woff2") format("woff2-variations");
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("./assets/fonts/IBMPlexMono-Regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("./assets/fonts/IBMPlexMono-Medium.ttf") format("truetype");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("./assets/fonts/IBMPlexMono-SemiBold.ttf") format("truetype");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: "Satoshi";
  src: url("./assets/fonts/Satoshi-VariableItalic.woff2") format("woff2-variations");
  font-style: italic;
  font-weight: 300 900;
  font-display: swap;
}

:root {
  /* 1. PRIMITIVES — never use directly inside components */
  --rd-black: #000000;
  --rd-orange: #fe7701;
  --rd-orange-legacy-1: #ff8000;
  --rd-orange-legacy-2: #fd6d01;
  --rd-orange-light: #ffad33;
  --rd-orange-hover: #ff941f;
  --rd-orange-active: #e67200;
  --rd-orange-a10: rgb(254 119 1 / 0.1);
  --rd-orange-a16: rgb(254 119 1 / 0.16);
  --rd-orange-a18: rgb(254 119 1 / 0.18);
  --rd-orange-a19: rgb(254 119 1 / 0.19);
  --rd-orange-a20: rgb(254 119 1 / 0.2);
  --rd-orange-a22: rgb(254 119 1 / 0.22);
  --rd-orange-a40: rgb(254 119 1 / 0.4);
  --rd-gray-900: #111111;
  --rd-gray-850: #181818;
  --rd-gray-825: #1a1a1a;
  --rd-gray-800: #202020;
  --rd-gray-750: #2b2b2b;
  --rd-gray-700: #555555;
  --rd-gray-500: #999999;
  --rd-gray-100: #f2f2ef;
  --rd-white: #ffffff;
  --rd-white-a72: rgb(255 255 255 / 0.72);
  --rd-white-a85: rgb(255 255 255 / 0.85);
  --rd-white-a06: rgb(255 255 255 / 0.06);
  --rd-white-a10: rgb(255 255 255 / 0.1);
  --rd-black-a38: rgb(0 0 0 / 0.38);
  --rd-black-a40: rgb(0 0 0 / 0.4);
  --rd-black-a55: rgb(0 0 0 / 0.55);
  --rd-black-a82: rgb(0 0 0 / 0.82);

  --rd-gold-950: #6f5010;
  --rd-gold-700: #8c6508;
  --rd-gold-500: #d4af37;
  --rd-gold-200: #ffe89a;
  --rd-gold-50: #fff9d8;
  --rd-gold-a22: rgb(255 232 154 / 0.22);
  --rd-silver-950: #303236;
  --rd-silver-700: #747980;
  --rd-silver-500: #b8bdc4;
  --rd-silver-200: #e8edf2;
  --rd-silver-50: #ffffff;

  --rd-font-display: "Panchang", "Arial Black", sans-serif;
  --rd-font-body: "Satoshi", Inter, Arial, sans-serif;
  --rd-font-technical: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  --rd-text-xs: 0.75rem;
  --rd-text-sm: 0.875rem;
  --rd-text-md: 1rem;
  --rd-text-lg: 1.125rem;
  --rd-text-xl: 1.375rem;
  --rd-text-2xl: clamp(1.75rem, 3vw, 2.5rem);
  --rd-text-3xl: clamp(2.5rem, 6vw, 5rem);
  --rd-leading-tight: 0.96;
  --rd-leading-copy: 1.55;
  --rd-tracking-display: -0.045em;
  --rd-tracking-label: 0.12em;
  --rd-tracking-technical: 0.025em;

  --rd-space-1: 0.25rem;
  --rd-space-2: 0.5rem;
  --rd-space-3: 0.75rem;
  --rd-space-4: 1rem;
  --rd-space-5: 1.25rem;
  --rd-space-6: 1.5rem;
  --rd-space-8: 2rem;
  --rd-space-10: 2.5rem;
  --rd-space-12: 3rem;
  --rd-space-16: 4rem;
  --rd-space-20: 5rem;
  --rd-space-24: 6rem;

  --rd-radius-sm: 0.75rem;
  --rd-radius-control: 1.375rem;
  --rd-radius-md: 1.75rem;
  --rd-radius-lg: 2.25rem;
  --rd-radius-pill: 999px;
  --rd-border-hairline: 1px;

  --rd-shadow-card: inset 0 1px 0 var(--rd-white-a06), 0 1px 2px var(--rd-black-a40);
  --rd-shadow-card-hover: inset 0 1px 0 var(--rd-white-a10), 0 6px 18px var(--rd-black-a38);
  --rd-shadow-orange: 0 0 0 1px var(--rd-orange-a22), 0 16px 48px var(--rd-orange-a16);
  --rd-shadow-control: inset 0 1px 0 var(--rd-white-a06), 0 1px 2px var(--rd-black-a40);
  --rd-shadow-control-hover: inset 0 1px 0 var(--rd-white-a10), 0 3px 10px var(--rd-black-a55);
  --rd-shadow-control-pressed: inset 0 1px 3px var(--rd-black-a40);
  --rd-duration-fast: 150ms;
  --rd-duration-normal: 240ms;
  --rd-duration-glare: 1600ms;
  --rd-duration-glare-loop: 3800ms;
  --rd-duration-gold-breathe: 12000ms;
  --rd-ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1);
  --rd-focus-ring-width: 3px;
  --rd-focus-ring-offset: 3px;

  /* 2. SEMANTIC — use these for layouts and custom UI */
  --rd-color-canvas: var(--rd-black);
  --rd-color-surface: var(--rd-gray-900);
  --rd-color-surface-raised: var(--rd-gray-850);
  --rd-color-control: var(--rd-gray-825);
  --rd-color-control-hover: var(--rd-gray-800);
  --rd-color-brand: var(--rd-orange);
  --rd-color-brand-hover: var(--rd-orange-hover);
  --rd-color-brand-active: var(--rd-orange-active);
  --rd-color-on-brand: var(--rd-black);
  --rd-color-text: var(--rd-gray-100);
  --rd-color-text-muted: var(--rd-gray-500);
  --rd-color-text-disabled: var(--rd-gray-700);
  --rd-color-border: var(--rd-gray-700);
  --rd-color-border-subtle: var(--rd-gray-750);
  --rd-color-focus: var(--rd-orange);
  --rd-color-overlay: rgb(0 0 0 / 0.76);
  --rd-color-on-metal: var(--rd-black);
  --rd-color-nav-backdrop: var(--rd-black-a82);
  --rd-color-wordmark-rev-on-dark: var(--rd-gray-100);
  --rd-color-wordmark-rev-on-light: var(--rd-black);
  --rd-color-wordmark-dex: var(--rd-orange);

  --rd-gradient-gold: linear-gradient(115deg, var(--rd-gold-950) 0%, var(--rd-gold-700) 18%, var(--rd-gold-200) 39%, var(--rd-gold-50) 47%, var(--rd-gold-500) 57%, var(--rd-gold-700) 76%, var(--rd-gold-200) 100%);
  --rd-gradient-silver: linear-gradient(115deg, var(--rd-silver-950) 0%, var(--rd-silver-700) 18%, var(--rd-silver-200) 38%, var(--rd-silver-50) 47%, var(--rd-silver-500) 60%, var(--rd-silver-700) 78%, var(--rd-silver-200) 100%);
  --rd-gradient-glare: linear-gradient(105deg, transparent 42%, var(--rd-white-a85) 50%, transparent 58%);
  --rd-gradient-gold-ambient: radial-gradient(ellipse at center, var(--rd-gold-a22) 0%, transparent 66%);
  --rd-gradient-brand: linear-gradient(135deg, var(--rd-orange) 0%, var(--rd-orange-light) 48%, var(--rd-orange) 100%);
  --rd-gradient-button-brand: linear-gradient(180deg, var(--rd-orange-hover) 0%, var(--rd-orange) 58%, var(--rd-orange-active) 140%);

  --rd-space-inline-page: var(--rd-space-5);
  --rd-space-block-section: var(--rd-space-16);
  --rd-content-max: 80rem;
  --rd-copy-max: 42rem;

  /* 3. COMPONENT — override locally only when a component truly differs */
  --rd-control-height-sm: 2.75rem;
  --rd-control-height: 3rem;
  --rd-control-height-lg: 3.5rem;
  --rd-control-padding-x: var(--rd-space-4);
  --rd-control-radius: var(--rd-radius-control);
  --rd-control-border: var(--rd-color-border-subtle);
  --rd-control-bg: var(--rd-color-control);
  --rd-control-bg-hover: var(--rd-color-control-hover);
  --rd-button-height: var(--rd-control-height);
  --rd-button-padding-x: var(--rd-space-5);
  --rd-button-radius: var(--rd-control-radius);
  --rd-button-bg: var(--rd-gradient-button-brand);
  --rd-button-fg: var(--rd-color-on-brand);
  --rd-button-secondary-bg: var(--rd-control-bg);
  --rd-button-secondary-fg: var(--rd-color-text);
  --rd-button-shadow-emphasized: var(--rd-shadow-control), 0 0 1.5rem 0.125rem var(--rd-orange-a18);
  --rd-button-shadow-emphasized-hover: var(--rd-shadow-control-hover), 0 0 2.25rem 0.35rem var(--rd-orange-a40);
  --rd-button-shadow-emphasized-active: var(--rd-shadow-control-pressed), 0 0 1.25rem var(--rd-orange-a18);
  --rd-button-active-scale: 0.985;
  --rd-control-disabled-opacity: 0.42;
  --rd-card-bg: var(--rd-color-surface);
  --rd-card-border: var(--rd-color-border-subtle);
  --rd-card-radius: var(--rd-radius-lg);
  --rd-card-padding: var(--rd-space-5);
  --rd-input-height: var(--rd-control-height);
  --rd-input-padding-x: var(--rd-control-padding-x);
  --rd-input-radius: var(--rd-control-radius);
  --rd-input-bg: var(--rd-control-bg);
  --rd-input-border: var(--rd-control-border);
  --rd-wordmark-rev: var(--rd-color-wordmark-rev-on-dark);
  --rd-wordmark-dex: var(--rd-color-wordmark-dex);
}

@media (min-width: 48rem) {
  :root {
    --rd-space-inline-page: var(--rd-space-8);
    --rd-space-block-section: var(--rd-space-20);
    --rd-card-padding: var(--rd-space-6);
  }
}

@media (min-width: 75rem) {
  :root {
    --rd-space-inline-page: var(--rd-space-20);
    --rd-space-block-section: var(--rd-space-24);
    --rd-card-padding: var(--rd-space-8);
  }
}

* { box-sizing: border-box; }

html {
  color-scheme: dark;
  background: var(--rd-color-canvas);
  font-family: var(--rd-font-body);
}

body {
  margin: 0;
  background: var(--rd-color-canvas);
  color: var(--rd-color-text);
  font-size: var(--rd-text-md);
  line-height: var(--rd-leading-copy);
  -webkit-font-smoothing: antialiased;
}

::selection {
  background: var(--rd-color-brand);
  color: var(--rd-color-on-brand);
}

:focus-visible {
  outline: var(--rd-focus-ring-width) solid var(--rd-color-focus);
  outline-offset: var(--rd-focus-ring-offset);
}

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