/*
 * Andaime.Fun Design Tokens
 * Version: 1.1.0
 * Identity: fantasy editorial — navy, aged gold, parchment and emerald.
 * Fonts: Cinzel (display), Lora (editorial), Inter (UI).
 */

:root {
  color-scheme: light;

  /* Brand */
  --af-navy-950: #05111d;
  --af-navy-900: #071827;
  --af-navy-850: #0a1d2e;
  --af-navy-800: #0d2940;
  --af-navy-700: #113650;
  --af-navy-600: #174b6d;
  --af-navy-500: #1f668e;

  --af-gold-950: #3e260a;
  --af-gold-900: #58370d;
  --af-gold-800: #704611;
  --af-gold-700: #94651e;
  --af-gold-600: #b8872f;
  --af-gold-500: #d9ab4b;
  --af-gold-400: #e7c56f;
  --af-gold-300: #f2d58a;
  --af-gold-200: #f8e7b5;
  --af-gold-100: #fff1c7;

  --af-parchment-50: #fffdf7;
  --af-parchment-100: #fff8e9;
  --af-parchment-200: #f8ecd4;
  --af-parchment-300: #efdbb8;
  --af-parchment-400: #dcc19a;
  --af-parchment-500: #c9a574;

  --af-emerald-900: #043b2c;
  --af-emerald-800: #07523c;
  --af-emerald-700: #066a4b;
  --af-emerald-600: #078f5e;
  --af-emerald-500: #0dbe78;
  --af-emerald-400: #35d998;
  --af-emerald-300: #76edbd;

  --af-blue-action-700: #073b79;
  --af-blue-action-600: #0c4d94;
  --af-blue-action-500: #1267bb;
  --af-danger-700: #8f3029;
  --af-danger-600: #c7493f;
  --af-warning-600: #c98518;
  --af-success-600: var(--af-emerald-600);

  /* Semantic colors */
  --af-color-page: var(--af-navy-950);
  --af-color-structure: var(--af-navy-850);
  --af-color-panel-title: var(--af-navy-800);
  --af-color-surface: var(--af-parchment-100);
  --af-color-surface-raised: var(--af-parchment-50);
  --af-color-surface-muted: var(--af-parchment-200);
  --af-color-border-dark: #24180b;
  --af-color-border-gold: var(--af-gold-500);
  --af-color-border-highlight: var(--af-gold-300);
  --af-color-text: #2b2116;
  --af-color-text-muted: #695641;
  --af-color-text-inverse: #fff8e7;
  --af-color-text-gold: var(--af-gold-100);
  --af-color-link: #0b4e8a;
  --af-color-link-hover: #073866;
  --af-color-focus: #76edbd;
  --af-color-online: var(--af-emerald-500);
  --af-color-offline: var(--af-danger-600);

  /* Gradients */
  --af-gradient-navy: linear-gradient(180deg, #17405c 0%, #0d2940 45%, #071827 100%);
  --af-gradient-gold: linear-gradient(180deg, #fff1c7 0%, #d9ab4b 42%, #94651e 72%, #58370d 100%);
  --af-gradient-parchment: linear-gradient(180deg, #fffdf7 0%, #fff8e9 54%, #efdbb8 100%);
  --af-gradient-emerald: linear-gradient(180deg, #0dbe78 0%, #078f5e 55%, #043b2c 100%);
  --af-gradient-media-scrim: linear-gradient(180deg, transparent 48%, rgba(5, 17, 29, 0.9) 100%);
  --af-gradient-wallpaper-overlay: linear-gradient(180deg, rgba(5, 17, 29, 0.08), rgba(5, 17, 29, 0.58));

  /* Typography */
  --af-font-display: "Cinzel", Georgia, "Times New Roman", serif;
  --af-font-editorial: "Lora", Georgia, "Times New Roman", serif;
  --af-font-ui: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --af-font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;

  --af-text-xs: 0.75rem;
  --af-text-sm: 0.875rem;
  --af-text-md: 1rem;
  --af-text-lg: 1.125rem;
  --af-text-xl: 1.375rem;
  --af-text-2xl: 1.75rem;
  --af-text-3xl: 2.25rem;
  --af-leading-tight: 1.2;
  --af-leading-normal: 1.5;
  --af-leading-relaxed: 1.7;
  --af-tracking-title: 0.08em;
  --af-tracking-label: 0.045em;

  /* Spacing */
  --af-space-0: 0;
  --af-space-1: 0.25rem;
  --af-space-2: 0.5rem;
  --af-space-3: 0.75rem;
  --af-space-4: 1rem;
  --af-space-5: 1.25rem;
  --af-space-6: 1.5rem;
  --af-space-8: 2rem;
  --af-space-10: 2.5rem;
  --af-space-12: 3rem;
  --af-space-16: 4rem;
  --af-space-20: 5rem;

  /* Geometry */
  --af-radius-xs: 2px;
  --af-radius-sm: 4px;
  --af-radius-md: 7px;
  --af-radius-pill: 999px;
  --af-control-height: 44px;
  --af-panel-title-height: 52px;
  --af-shell-max: 1128px;
  --af-column-side: 256px;
  --af-column-main: 584px;
  --af-column-gap: 16px;
  --af-header-desktop: 240px;
  --af-header-mobile: 178px;
  --af-content-max: 72ch;

  /* Lines and frames */
  --af-border-hairline: 1px;
  --af-border-strong: 2px;
  --af-border-ornate: 3px;
  --af-frame-border: 1px solid var(--af-color-border-dark);
  --af-frame-ring: 0 0 0 2px var(--af-gold-700), inset 0 0 0 1px var(--af-gold-300);

  /* Elevation */
  --af-shadow-xs: 0 1px 2px rgba(3, 10, 17, 0.26);
  --af-shadow-sm: 0 4px 10px rgba(3, 10, 17, 0.3);
  --af-shadow-md: 0 10px 24px rgba(3, 10, 17, 0.38);
  --af-shadow-lg: 0 18px 46px rgba(3, 10, 17, 0.48);
  --af-shadow-gold: 0 0 0 1px rgba(242, 213, 138, 0.5), 0 8px 20px rgba(3, 10, 17, 0.38);
  --af-shadow-focus: 0 0 0 3px rgba(118, 237, 189, 0.42);
  --af-logo-filter: drop-shadow(0 12px 18px rgba(3, 10, 17, 0.48));

  /* Motion */
  --af-duration-fast: 120ms;
  --af-duration-normal: 220ms;
  --af-duration-slow: 420ms;
  --af-ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --af-ease-emphasized: cubic-bezier(0.2, 0.8, 0.2, 1);

  /* Layers */
  --af-z-base: 0;
  --af-z-content: 10;
  --af-z-header: 20;
  --af-z-popover: 40;
  --af-z-modal: 60;

  /* Breakpoint reference — use literal values in @media rules */
  --af-breakpoint-mobile-max: 760px;
  --af-breakpoint-tablet-min: 761px;
  --af-breakpoint-desktop-min: 1181px;
}

/* Optional aliases for shared components. */
.af-theme {
  --color-background: var(--af-color-page);
  --color-surface: var(--af-color-surface);
  --color-structure: var(--af-color-structure);
  --color-primary: var(--af-blue-action-600);
  --color-accent: var(--af-gold-500);
  --color-success: var(--af-success-600);
  --color-danger: var(--af-danger-600);
  --color-text: var(--af-color-text);
  --font-heading: var(--af-font-display);
  --font-body: var(--af-font-editorial);
  --font-control: var(--af-font-ui);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --af-duration-fast: 0ms;
    --af-duration-normal: 0ms;
    --af-duration-slow: 0ms;
  }
}