/* ============================================================
   Design-system tokens — structure from the dossier handoff
   bundle's tokens/{colors,typography,spacing,effects}.css, with
   the palette neutralized for the white-label base.

   Loaded AFTER brand-tokens.css and re-declares the same names,
   so THIS file's values are the ones that win. Any palette change
   must be made in both files or it will not take effect.
   ============================================================ */

/* ---- tokens/colors.css ---- */
/* ============================================================
   Color tokens — neutral white-label base.
   Two layers:
     1. Canonical product tokens — verbatim names/values, so this
        system matches production 1:1.
     2. Semantic aliases — the names this DS's components consume,
        pointed at the canonical tokens.
   ============================================================ */

:root {
  /* ============ 1 · CANONICAL PRODUCT TOKENS ============ */

  /* ---- Primary (neutral slate near-black chrome) ---------- */
  --primary:       #0a0a0f;
  --primary-mid:   #1a1a2e;
  --primary-light: #2d2d44;

  /* ---- Neutral slate accent ------------------------------------- */
  --gold:        #c9a962;
  --gold-muted:  #a68b4b;
  --gold-subtle: rgba(201, 169, 98, .15);

  /* ---- Backgrounds (cool near-whites) ------------------- */
  --bg-primary:   #fafafa;
  --bg-secondary: #fff;
  --bg-tertiary:  #f5f5f7;
  --bg-elevated:  #e8e9ed;
  --bg-glass:     hsla(0, 0%, 100%, .72);
  --bg-dark:           #0a0a0f;
  --bg-dark-secondary: #1a1a2e;

  /* ---- Text (Apple system grays) ------------------------ */
  --text-primary:       #1d1d1f;
  --text-secondary:     #424245;
  --text-tertiary:      #6e6e73;
  --text-muted:         #86868b;
  --text-inverse:       #fff;
  --text-inverse-muted: hsla(0, 0%, 100%, .75);

  /* ---- Borders (cool black alphas) ---------------------- */
  --border-primary: rgba(0, 0, 0, .06);
  --border-subtle:  rgba(0, 0, 0, .04);
  --border-strong:  rgba(0, 0, 0, .1);
  --border-inverse: hsla(0, 0%, 100%, .08);

  /* ---- Semantic (Apple system colors) ------------------- */
  --success: #34c759;  --success-bg: rgba(52, 199, 89, .1);
  --warning: #ff9f0a;  --warning-bg: rgba(255, 159, 10, .1);
  --error:   #ff3b30;  --error-bg:   rgba(255, 59, 48, .1);
  --info:    #007aff;  --info-bg:    rgba(0, 122, 255, .1);

  /* ---- Map layer palette (fill / line / label) ---------- */
  --map-ocd-tract-fill: rgba(124, 58, 237, .32);       --map-ocd-tract-line: #5b21b6;
  --map-private-title-fill: rgba(250, 204, 21, .2);    --map-private-title-line: #b45309;
  --map-blm-lease-actual-fill: rgba(255, 85, 0, .3);   --map-blm-lease-actual-line: #c2410c;
  --map-blm-lease-allocated-fill: hsla(28, 94%, 74%, .34);   --map-blm-lease-allocated-line: #ea580c;
  --map-blm-lease-nonproducing-fill: hsla(50, 23%, 64%, .32); --map-blm-lease-nonproducing-line: #7c6f45;
  --map-slo-state-lease-fill: rgba(56, 189, 248, .28); --map-slo-state-lease-line: #0369a1;
  --map-owner-owned-fill: rgba(34, 197, 94, .34);   --map-owner-owned-line: #15803d;  --map-owner-owned-label: #14532d;
  --map-owner-fepiv-fill: rgba(245, 158, 11, .33);  --map-owner-fepiv-line: #b45309;  --map-owner-fepiv-label: #78350f;
  --map-owner-eddy-fill: rgba(14, 165, 233, .28);   --map-owner-eddy-line: #0f766e;   --map-owner-eddy-label: #164e63;

  /* ============ 2 · SEMANTIC ALIASES (component API) ===== */

  /* ---- Accent ramp (anchored on --gold / --gold-muted) ---- */
  --gold-900: #5c471f;
  --gold-800: #7a5f2c;
  --gold-700: #8a6d34;
  --gold-600: var(--gold-muted);   /* #a68b4b — links, action text */
  --gold-500: var(--gold);         /* #c9a962 — KPI numerals, dots */
  --gold-400: #d4bd82;
  --gold-300: #e0cfa3;
  --gold-200: #ede0c2;
  --gold-100: #f6efdc;
  --gold-050: #fbf7ec;

  /* ---- Ink ramp (cool grays for text/neutral surfaces) -- */
  --ink-950: #0a0a0f;
  --ink-900: #1d1d1f;
  --ink-800: #2d2d44;
  --ink-700: #424245;
  --ink-600: #6e6e73;
  --ink-500: #86868b;
  --ink-400: #a1a1a6;
  --ink-300: #c7c7cc;
  --ink-200: #d9d9de;
  --ink-100: #e8e9ed;
  --ink-075: #eff0f2;
  --ink-050: #f5f5f7;
  --ink-025: #fafafa;
  --white:   #ffffff;

  /* ---- Data-viz palette --------------------------------- */
  --viz-purple: #7c3aed;
  --viz-blue:   #3c84fc;
  --viz-teal:   #0f766e;
  --viz-navy:   #303c54;
  --viz-gold:   #c9a962;
  --viz-tan:    #d9c6a0;

  /* ---- Status (deal / record states) -------------------- */
  --status-hot:        #f97316;   --status-hot-bg:     rgba(249, 115, 22, .1);
  --status-active:     var(--success); --status-active-bg:  var(--success-bg);
  --status-wi:         var(--info);    --status-wi-bg:      var(--info-bg);
  --status-danger:     var(--error);   --status-danger-bg:  var(--error-bg);
  --status-warn:       var(--warning); --status-warn-bg:    var(--warning-bg);
  --status-neutral:    var(--text-muted); --status-neutral-bg: rgba(0, 0, 0, .05);

  /* ---- Surface / text / border aliases ------------------ */
  --bg-page:      var(--bg-primary);
  --bg-surface:   var(--bg-secondary);
  --bg-subtle:    var(--bg-tertiary);
  --bg-sunken:    var(--bg-tertiary);

  --border-default: var(--border-primary);

  --link:       var(--gold-muted);
  --link-hover: var(--gold-700);
  --text-accent: var(--gold-muted);

  /* ---- Dark command chrome ------------------------------ */
  --chrome-bg:         var(--primary);
  --chrome-surface:    var(--primary-mid);
  --chrome-border:     var(--border-inverse);
  --chrome-text:       #ffffff;
  --chrome-text-muted: hsla(0, 0%, 100%, .55);
  --chrome-label:      var(--gold);
  --chrome-active-bg:       hsla(0, 0%, 100%, .06);
  --chrome-active-bg-light: var(--white);
}

/* ---- tokens/typography.css ---- */
/* ============================================================
   Typography tokens
   CONFIRMED from the live product's :root.
   Display: inherits the body stack · UI/body: Inter · Mono: SF Mono/Fira Code.
   ============================================================ */

:root {
  /* ---- Families (product names + aliases) --------------- */
  --font-display: "Playfair Display", Georgia, serif;
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:    "SF Mono", "Fira Code", "Cascadia Code", Consolas, ui-monospace, Menlo, monospace;
  --font-sans:    var(--font-body);   /* alias */

  /* ---- Type scale (px) — product-exact ------------------ */
  --text-3xs: 9px;    /* below product scale — micro labels */
  --text-2xs: 10px;   /* product --text-xs */
  --text-xs:  11px;   /* product --text-sm */
  --text-sm:  12px;
  --text-base:13px;   /* product base */
  --text-md:  14px;
  --text-lg:  15px;
  --text-xl:  17px;
  --text-2xl: 20px;
  --text-3xl: 24px;
  --text-4xl: 32px;
  --text-5xl: 42px;
  --text-6xl: 56px;
  --text-7xl: 64px;

  /* ---- Weights ------------------------------------------ */
  --fw-regular:  400; /* @kind other */
  --fw-medium:   500; /* @kind other */
  --fw-semibold: 600; /* @kind other */
  --fw-bold:     700; /* @kind other */
  --fw-black:    900; /* @kind other */

  /* ---- Line heights ------------------------------------- */
  --lh-tight:   1.1;  /* @kind other */
  --lh-snug:    1.25; /* @kind other */
  --lh-normal:  1.5;  /* @kind other */
  --lh-relaxed: 1.65; /* @kind other */

  /* ---- Letter spacing ----------------------------------- */
  --tracking-tight:  -0.01em; /* headings — a hair negative */
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-wider:  0.08em;   /* uppercase eyebrow labels */
  --tracking-widest: 0.14em;   /* nav section headers */

  /* ---- Semantic roles ----------------------------------- */
  --type-hero-font:   var(--font-display);
  --type-hero-size:   var(--text-4xl);
  --type-hero-weight: var(--fw-bold);
  --type-hero-lh:     var(--lh-tight);

  --type-title-font:   var(--font-display);
  --type-title-size:   var(--text-2xl);
  --type-title-weight: var(--fw-bold);
  --type-title-lh:     var(--lh-snug);

  --type-stat-font:   var(--font-display);
  --type-stat-size:   var(--text-3xl);
  --type-stat-weight: var(--fw-bold);

  --type-eyebrow-font:     var(--font-body);
  --type-eyebrow-size:     var(--text-2xs);
  --type-eyebrow-weight:   var(--fw-semibold);
  --type-eyebrow-tracking: var(--tracking-wider);

  --type-body-font:   var(--font-body);
  --type-body-size:   var(--text-base);
  --type-body-weight: var(--fw-regular);
  --type-body-lh:     var(--lh-normal);

  --type-ui-font:   var(--font-body);
  --type-ui-size:   var(--text-sm);
  --type-ui-weight: var(--fw-medium);
}

/* ---- tokens/spacing.css ---- */
/* ============================================================
   Spacing & layout tokens
   CONFIRMED from the live product's :root. 2px-based scale.
   ============================================================ */

:root {
  /* ---- Spacing scale ------------------------------------ */
  --space-1:  2px;
  --space-2:  4px;
  --space-3:  6px;
  --space-4:  8px;
  --space-5:  10px;
  --space-6:  12px;
  --space-7:  14px;
  --space-8:  16px;
  --space-10: 20px;
  --space-12: 24px;
  --space-16: 32px;
  --space-20: 40px;
  /* extended (not in product root, kept for larger layouts) */
  --space-24: 48px;
  --space-32: 64px;
  --space-40: 80px;

  /* ---- Layout ------------------------------------------- */
  --sidebar-width: 240px;
  --header-height: 56px;
  --topbar-height: 56px;   /* alias */
  --content-max:   1600px;
  --gutter:        24px;
}

/* ---- tokens/effects.css ---- */
/* ============================================================
   Radius, border, shadow, motion, gradients
   & the topographic-contour background pattern.
   CONFIRMED from the live product's :root.
   ============================================================ */

:root {
  /* ---- Corner radii ------------------------------------- */
  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  24px;
  --radius-3xl:  24px;   /* alias — product caps at 2xl */
  --radius-full: 9999px;
  --radius-pill: 9999px; /* alias */
  --radius-card: 16px;   /* cards: 16px radius, 1px border-subtle */

  /* ---- Border widths ------------------------------------ */
  --border-width:   1px;
  --border-width-2: 1.5px;

  /* ---- Shadows (neutral black, layered) ----------------- */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, .03), 0 1px 2px rgba(0, 0, 0, .02);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .04), 0 1px 3px rgba(0, 0, 0, .02);
  --shadow-md: 0 2px 4px rgba(0, 0, 0, .04), 0 4px 12px rgba(0, 0, 0, .03), 0 8px 24px rgba(0, 0, 0, .02);
  --shadow-lg: 0 4px 6px rgba(0, 0, 0, .04), 0 10px 24px rgba(0, 0, 0, .05), 0 20px 48px rgba(0, 0, 0, .03);
  --shadow-xl: 0 8px 16px rgba(0, 0, 0, .06), 0 16px 32px rgba(0, 0, 0, .04), 0 32px 64px rgba(0, 0, 0, .02);
  --shadow-float: 0 12px 28px rgba(0, 0, 0, .08), 0 24px 56px rgba(0, 0, 0, .06), 0 2px 6px rgba(0, 0, 0, .04);
  --shadow-focus-gold: 0 0 0 3px rgba(201, 169, 98, .30);
  --shadow-focus-blue: 0 0 0 3px rgba(0, 122, 255, .28);
  --shadow-inset-hi: inset 0 1px 0 rgba(255, 255, 255, .06);

  /* ---- Motion ------------------------------------------- */
  --ease-default:  cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --duration-fast:   0.15s; /* @kind other */
  --duration-normal: 0.2s;  /* @kind other */
  --duration-slow:   0.3s;  /* @kind other */
  --dur-fast: 150ms; /* @kind other */
  --dur-base: 200ms; /* @kind other */
  --dur-slow: 300ms; /* @kind other */

  /* ---- Gradients ---------------------------------------- */
  --gradient-featured: linear-gradient(135deg, var(--primary) 0%, var(--primary-mid) 100%);
  --gradient-gold:     linear-gradient(135deg, var(--gold) 0%, var(--gold-muted) 100%);

  /* ---- Topographic contour pattern (brand texture) ------ */
  /* Faint gold contour lines — layered behind featured/dark surfaces. */
  --pattern-topo: url("data:image/svg+xml,%3Csvg width='400' height='400' viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 50 Q100 30 200 50 T400 40' fill='none' stroke='rgba(201,169,98,0.06)' stroke-width='1'/%3E%3Cpath d='M0 100 Q100 80 200 100 T400 90' fill='none' stroke='rgba(201,169,98,0.05)' stroke-width='1'/%3E%3Cpath d='M0 150 Q100 130 200 150 T400 140' fill='none' stroke='rgba(201,169,98,0.04)' stroke-width='1'/%3E%3Cpath d='M0 200 Q100 180 200 200 T400 190' fill='none' stroke='rgba(201,169,98,0.05)' stroke-width='1'/%3E%3Cpath d='M0 250 Q100 230 200 250 T400 240' fill='none' stroke='rgba(201,169,98,0.04)' stroke-width='1'/%3E%3Cpath d='M0 300 Q100 280 200 300 T400 290' fill='none' stroke='rgba(201,169,98,0.05)' stroke-width='1'/%3E%3Cpath d='M0 350 Q100 330 200 350 T400 340' fill='none' stroke='rgba(201,169,98,0.06)' stroke-width='1'/%3E%3C/svg%3E") /* @kind other */;
  --pattern-topo-featured: url("data:image/svg+xml,%3Csvg width='400' height='400' viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 50 Q100 30 200 50 T400 40' fill='none' stroke='rgba(201,169,98,0.1)' stroke-width='1'/%3E%3Cpath d='M0 100 Q100 80 200 100 T400 90' fill='none' stroke='rgba(201,169,98,0.08)' stroke-width='1'/%3E%3Cpath d='M0 150 Q100 130 200 150 T400 140' fill='none' stroke='rgba(201,169,98,0.06)' stroke-width='1'/%3E%3Cpath d='M0 200 Q100 180 200 200 T400 190' fill='none' stroke='rgba(201,169,98,0.08)' stroke-width='1'/%3E%3Cpath d='M0 250 Q100 230 200 250 T400 240' fill='none' stroke='rgba(201,169,98,0.06)' stroke-width='1'/%3E%3Cpath d='M0 300 Q100 280 200 300 T400 290' fill='none' stroke='rgba(201,169,98,0.08)' stroke-width='1'/%3E%3Cpath d='M0 350 Q100 330 200 350 T400 340' fill='none' stroke='rgba(201,169,98,0.1)' stroke-width='1'/%3E%3C/svg%3E") /* @kind other */;
}