/**
 * Aurrera Consulting — Design Tokens
 * --------------------------------------------------------------------------
 * Single source of truth for the visual identity. Drop this file in your
 * codebase and use the CSS variables anywhere. All other token files
 * (JS, JSON, Tailwind preset) are derived from these values.
 *
 * Last updated: May 2026
 */

:root {
  /* ── Brand colors ───────────────────────────────────────── */
  --aurrera-orange-50:  #FFF5E6;
  --aurrera-orange-100: #FDEBD0;
  --aurrera-orange-200: #FBD49E;
  --aurrera-orange-300: #F8B863;
  --aurrera-orange-400: #F49B2B;
  --aurrera-orange-500: #F08700;   /* PRIMARY — brand orange */
  --aurrera-orange-600: #C46D00;
  --aurrera-orange-700: #985400;
  --aurrera-orange-800: #6C3C00;
  --aurrera-orange-900: #402300;

  --aurrera-grey-50:  #FAFAFA;
  --aurrera-grey-100: #F5F5F5;
  --aurrera-grey-200: #EAEAEA;
  --aurrera-grey-300: #D9D9D9;
  --aurrera-grey-400: #B5B5B5;
  --aurrera-grey-500: #6E6E6E;     /* PRIMARY — brand grey */
  --aurrera-grey-600: #595959;
  --aurrera-grey-700: #404040;
  --aurrera-grey-800: #2A2A2A;
  --aurrera-grey-900: #1F1F1F;

  /* Semantic aliases (use these in product UI) */
  --color-bg:           #FFFFFF;
  --color-bg-subtle:    var(--aurrera-grey-100);
  --color-bg-muted:     var(--aurrera-grey-200);
  --color-bg-inverse:   var(--aurrera-grey-900);

  --color-fg:           var(--aurrera-grey-900);
  --color-fg-muted:     var(--aurrera-grey-600);
  --color-fg-subtle:    var(--aurrera-grey-500);
  --color-fg-inverse:   #FFFFFF;

  --color-accent:       var(--aurrera-orange-500);
  --color-accent-hover: var(--aurrera-orange-600);
  --color-accent-soft:  var(--aurrera-orange-100);
  --color-accent-fg:    #FFFFFF;

  /* Text links on light backgrounds — darkened for WCAG AA contrast (≥4.5:1) */
  --color-link:         var(--aurrera-orange-700);
  --color-link-hover:   var(--aurrera-orange-800);

  --color-border:       var(--aurrera-grey-300);
  --color-border-subtle:var(--aurrera-grey-200);
  --color-border-strong:var(--aurrera-grey-500);

  /* Functional / status colors (harmonized with palette) */
  --color-success:      #1F8A5B;
  --color-success-bg:   #E6F4EC;
  --color-warning:      var(--aurrera-orange-500);
  --color-warning-bg:   var(--aurrera-orange-100);
  --color-danger:       #C0392B;
  --color-danger-bg:    #FBEAE6;
  --color-info:         #2A6FDB;
  --color-info-bg:      #E6EEFB;

  /* ── Typography ─────────────────────────────────────────── */
  --font-display: "Montserrat", "Helvetica Neue", "Arial", sans-serif;
  --font-body:    "Source Sans 3", "Source Sans Pro", "Helvetica Neue", "Arial", sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  /* Type scale — modular, base 16px */
  --text-xs:   0.75rem;   /* 12 — captions, micro labels */
  --text-sm:   0.875rem;  /* 14 — small UI */
  --text-base: 1rem;      /* 16 — body */
  --text-md:   1.125rem;  /* 18 — lead body */
  --text-lg:   1.375rem;  /* 22 — H4 */
  --text-xl:   1.75rem;   /* 28 — H3 */
  --text-2xl:  2.25rem;   /* 36 — H2 */
  --text-3xl:  3rem;      /* 48 — H1 */
  --text-4xl:  4.25rem;   /* 68 — display */
  --text-5xl:  6rem;      /* 96 — hero */

  --leading-tight:  1.15;
  --leading-snug:   1.3;
  --leading-normal: 1.5;
  --leading-loose:  1.7;

  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.08em;
  --tracking-wider:  0.14em;

  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semibold:600;
  --weight-bold:    700;
  --weight-extrabold:800;

  /* ── Spacing scale (4px base) ───────────────────────────── */
  --space-0:  0;
  --space-1:  0.25rem;   /* 4  */
  --space-2:  0.5rem;    /* 8  */
  --space-3:  0.75rem;   /* 12 */
  --space-4:  1rem;      /* 16 */
  --space-5:  1.25rem;   /* 20 */
  --space-6:  1.5rem;    /* 24 */
  --space-8:  2rem;      /* 32 */
  --space-10: 2.5rem;    /* 40 */
  --space-12: 3rem;      /* 48 */
  --space-16: 4rem;      /* 64 */
  --space-20: 5rem;      /* 80 */
  --space-24: 6rem;      /* 96 */
  --space-32: 8rem;      /* 128 */

  /* ── Border radius ──────────────────────────────────────── */
  --radius-none: 0;
  --radius-sm:   2px;
  --radius-md:   4px;     /* default — buttons, inputs, cards */
  --radius-lg:   8px;
  --radius-xl:   12px;
  --radius-full: 999px;

  /* ── Shadows / elevation ────────────────────────────────── */
  --shadow-xs: 0 1px 2px rgba(31, 31, 31, 0.04);
  --shadow-sm: 0 1px 3px rgba(31, 31, 31, 0.06), 0 1px 2px rgba(31, 31, 31, 0.04);
  --shadow-md: 0 4px 12px rgba(31, 31, 31, 0.08), 0 2px 4px rgba(31, 31, 31, 0.04);
  --shadow-lg: 0 12px 28px rgba(31, 31, 31, 0.12), 0 4px 8px rgba(31, 31, 31, 0.06);
  --shadow-xl: 0 24px 48px rgba(31, 31, 31, 0.16);
  --shadow-focus: 0 0 0 3px rgba(240, 135, 0, 0.32);

  /* ── Layout ─────────────────────────────────────────────── */
  --container-sm: 640px;
  --container-md: 768px;
  --container-lg: 1024px;
  --container-xl: 1280px;
  --container-2xl: 1440px;

  /* ── Motion ─────────────────────────────────────────────── */
  --ease-out:    cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-snap:   cubic-bezier(0.16, 1, 0.3, 1);

  --duration-fast:   120ms;
  --duration-base:   200ms;
  --duration-slow:   320ms;

  /* ── Z-index ────────────────────────────────────────────── */
  --z-base:    0;
  --z-raised:  10;
  --z-sticky:  100;
  --z-overlay: 1000;
  --z-modal:   1100;
  --z-toast:   1200;
  --z-tooltip: 1300;
}

/* ── Dark mode (optional, kept brand-coherent) ─────────────── */
@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"],
  :root[data-theme="dark"] {
    --color-bg:        var(--aurrera-grey-900);
    --color-bg-subtle: var(--aurrera-grey-800);
    --color-bg-muted:  var(--aurrera-grey-700);

    --color-fg:        #F5F5F5;
    --color-fg-muted:  var(--aurrera-grey-300);
    --color-fg-subtle: var(--aurrera-grey-400);

    --color-border:        var(--aurrera-grey-700);
    --color-border-subtle: var(--aurrera-grey-800);
    --color-border-strong: var(--aurrera-grey-500);

    --color-accent-soft: rgba(240, 135, 0, 0.18);
  }
}

/* ── Reduced-motion accommodation ─────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration-base: 0ms;
    --duration-slow: 0ms;
  }
}