/* ============================================================================
   OIL & GAS REGISTRY — Design System Foundations
   registry.oilandgas.world
   Colors + Type tokens. Base (raw) vars and Semantic (role) vars.
   Surface model: dark operational intelligence. Bloomberg-meets-Stripe.
   ----------------------------------------------------------------------------
   Fonts: Geist (UI/display) + Geist Mono (data, coordinates, metrics).
   Loaded from Google Fonts. If working offline, drop .ttf into /fonts and
   wire @font-face — see README "Visual Foundations".
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700;800&family=Geist+Mono:wght@400;500;600;700&display=swap');

:root {
  /* ---------------------------------------------------------------------------
     1. BASE COLOR TOKENS  (raw palette — do not use directly in components;
        prefer the semantic tokens below)
     ------------------------------------------------------------------------- */

  /* Ink / surfaces — the operational substrate (near-black, cool) */
  --ink-900: #0B0F14;   /* app background — deepest */
  --ink-800: #0E131A;   /* raised background */
  --ink-700: #111827;   /* secondary surface / rails */
  --ink-600: #161B22;   /* panels, cards */
  --ink-500: #1C232E;   /* elevated panels, popovers */
  --ink-450: #232B37;   /* hover surface */
  --ink-400: #2A3340;   /* active surface / pressed */

  /* Hairlines (light-on-dark, ascending opacity) */
  --line-1: rgba(255,255,255,0.06);   /* default border */
  --line-2: rgba(255,255,255,0.10);   /* stronger divider */
  --line-3: rgba(255,255,255,0.16);   /* focus ring base / emphasis */
  --line-inset: rgba(255,255,255,0.04); /* inner top highlight */

  /* Text */
  --text-100: #F9FAFB;  /* primary */
  --text-200: #D5DAE1;  /* secondary-strong */
  --text-300: #9CA3AF;  /* secondary */
  --text-400: #6B7280;  /* muted / captions */
  --text-500: #4B5563;  /* disabled / faint */

  /* Brand — Signal Amber (flare / energy / beacon) */
  --amber-50:  #FEF6E7;
  --amber-300: #FCD34D;
  --amber-400: #FBBF24;
  --amber-500: #F59E0B;   /* PRIMARY ACCENT */
  --amber-600: #D97E06;
  --amber-700: #B45309;
  --amber-glow: rgba(245,158,11,0.16);

  /* Maritime Teal — secondary accent (live / sonar / sea) */
  --teal-400: #2DD4BF;
  --teal-500: #14B8A6;
  --teal-600: #0D9488;

  /* Status / semantic hues */
  --green-500: #10B981;   /* success / operating / live */
  --green-400: #34D399;
  --red-500:   #EF4444;   /* danger / decommissioned / offline */
  --red-400:   #F87171;
  --blue-500:  #3B82F6;   /* info / planned */
  --blue-400:  #60A5FA;
  --violet-500:#8B5CF6;   /* accent for relationship / subsea */

  /* Israel (IL) layer palette — distinct from Norway green/violet.
     Cyan for fields, sky for wells, orange for licences.
     Checked against all existing tokens: no clashes. */
  --il-field:   #06B6D4;  /* cyan-500  — IL gas fields */
  --il-well:    #38BDF8;  /* sky-400   — IL wells (lighter than cyan to distinguish) */
  --il-licence: #FB923C;  /* orange-400 — IL licence/block markers */

  /* Lifecycle stage palette (Field / asset lifecycle) */
  --lc-exploration:   #8B5CF6;  /* violet */
  --lc-appraisal:     #3B82F6;  /* blue */
  --lc-development:   #06B6D4;  /* cyan */
  --lc-production:    #10B981;  /* green — peak value */
  --lc-mature:       #F59E0B;  /* amber */
  --lc-decommission: #F97316;  /* orange */
  --lc-abandoned:    #6B7280;  /* gray */

  /* Data-viz ramp (muted enterprise tones, for charts/maps) */
  --viz-1: #F59E0B;
  --viz-2: #2DD4BF;
  --viz-3: #60A5FA;
  --viz-4: #A78BFA;
  --viz-5: #F87171;
  --viz-6: #94A3B8;
  --viz-grid: rgba(255,255,255,0.05);

  /* ---------------------------------------------------------------------------
     2. SEMANTIC COLOR TOKENS  (use these in components)
     ------------------------------------------------------------------------- */
  --bg-app:        var(--ink-900);
  --bg-raised:     var(--ink-800);
  --bg-rail:       var(--ink-700);
  --bg-panel:      var(--ink-600);
  --bg-elevated:   var(--ink-500);
  --bg-hover:      var(--ink-450);
  --bg-active:     var(--ink-400);

  --fg:            var(--text-100);
  --fg-strong:     var(--text-100);
  --fg-secondary:  var(--text-300);
  --fg-muted:      var(--text-400);
  --fg-faint:      var(--text-500);
  --fg-on-accent:  #1A1206;        /* dark text on amber */

  --border:        var(--line-1);
  --border-strong: var(--line-2);
  --border-emphasis: var(--line-3);

  --accent:        var(--amber-500);
  --accent-hover:  var(--amber-400);
  --accent-press:  var(--amber-600);
  --accent-glow:   var(--amber-glow);
  --accent-2:      var(--teal-500);

  --success: var(--green-500);
  --warning: var(--amber-500);
  --danger:  var(--red-500);
  --info:    var(--blue-500);

  --focus-ring: rgba(245,158,11,0.55);

  /* ---------------------------------------------------------------------------
     3. ELEVATION / SHADOW  (dark-surface elevation: shadow + inner top light)
     ------------------------------------------------------------------------- */
  --shadow-xs: 0 1px 2px rgba(0,0,0,0.40);
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.45), 0 1px 2px rgba(0,0,0,0.30);
  --shadow-md: 0 8px 20px -6px rgba(0,0,0,0.55), 0 2px 6px rgba(0,0,0,0.40);
  --shadow-lg: 0 20px 40px -12px rgba(0,0,0,0.65), 0 6px 14px rgba(0,0,0,0.45);
  --shadow-pop: 0 24px 60px -12px rgba(0,0,0,0.75);
  --inset-top: inset 0 1px 0 var(--line-inset);   /* top edge catch-light */
  --glow-accent: 0 0 0 1px rgba(245,158,11,0.35), 0 8px 24px -6px rgba(245,158,11,0.30);

  /* ---------------------------------------------------------------------------
     4. RADIUS
     ------------------------------------------------------------------------- */
  --r-xs: 3px;
  --r-sm: 5px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 16px;
  --r-2xl: 22px;
  --r-pill: 999px;

  /* ---------------------------------------------------------------------------
     5. SPACING (4px base grid)
     ------------------------------------------------------------------------- */
  --sp-0: 0;
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;

  /* ---------------------------------------------------------------------------
     6. TYPOGRAPHY — families
     ------------------------------------------------------------------------- */
  --font-sans: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, 'SF Mono', 'JetBrains Mono', 'IBM Plex Mono', Menlo, Consolas, monospace;

  /* Type scale (px). Dense-data optimized. */
  --fs-display: 56px;   /* hero numerals / landing */
  --fs-h1: 38px;
  --fs-h2: 28px;
  --fs-h3: 21px;
  --fs-h4: 17px;
  --fs-body: 14px;      /* UI default */
  --fs-body-lg: 16px;
  --fs-sm: 13px;
  --fs-xs: 12px;
  --fs-2xs: 11px;       /* table labels, badges */
  --fs-micro: 10px;     /* eyebrow / overline */

  --lh-tight: 1.05;
  --lh-snug: 1.25;
  --lh-normal: 1.5;
  --lh-relaxed: 1.65;

  --tracking-tight: -0.02em;
  --tracking-snug: -0.01em;
  --tracking-normal: 0;
  --tracking-wide: 0.04em;
  --tracking-eyebrow: 0.14em;   /* uppercase overlines */
  --tracking-mono: 0.01em;
}

/* ============================================================================
   SEMANTIC TYPE ROLES  (apply as classes, or copy the rules)
   ========================================================================== */

.t-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--fg-muted);
}
.t-display {
  font-family: var(--font-sans);
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  font-weight: 700;
  letter-spacing: var(--tracking-tight);
  color: var(--fg-strong);
}
.t-h1 { font-family: var(--font-sans); font-size: var(--fs-h1); line-height: var(--lh-snug); font-weight: 700; letter-spacing: var(--tracking-tight); color: var(--fg-strong); }
.t-h2 { font-family: var(--font-sans); font-size: var(--fs-h2); line-height: var(--lh-snug); font-weight: 600; letter-spacing: var(--tracking-snug); color: var(--fg-strong); }
.t-h3 { font-family: var(--font-sans); font-size: var(--fs-h3); line-height: var(--lh-snug); font-weight: 600; letter-spacing: var(--tracking-snug); color: var(--fg-strong); }
.t-h4 { font-family: var(--font-sans); font-size: var(--fs-h4); line-height: var(--lh-normal); font-weight: 600; color: var(--fg-strong); }
.t-body { font-family: var(--font-sans); font-size: var(--fs-body); line-height: var(--lh-normal); font-weight: 400; color: var(--fg-secondary); }
.t-body-strong { font-family: var(--font-sans); font-size: var(--fs-body); line-height: var(--lh-normal); font-weight: 500; color: var(--fg); }
.t-sm { font-family: var(--font-sans); font-size: var(--fs-sm); line-height: var(--lh-normal); color: var(--fg-secondary); }
.t-caption { font-family: var(--font-sans); font-size: var(--fs-xs); line-height: var(--lh-normal); color: var(--fg-muted); }

/* Data / numerics — tabular, monospace. The Bloomberg layer. */
.t-data { font-family: var(--font-mono); font-size: var(--fs-body); font-weight: 500; font-variant-numeric: tabular-nums; letter-spacing: var(--tracking-mono); color: var(--fg); }
.t-data-lg { font-family: var(--font-mono); font-size: var(--fs-h3); font-weight: 600; font-variant-numeric: tabular-nums; color: var(--fg-strong); }
.t-data-xl { font-family: var(--font-mono); font-size: var(--fs-h1); font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: var(--tracking-tight); color: var(--fg-strong); }
.t-code { font-family: var(--font-mono); font-size: var(--fs-sm); font-weight: 500; color: var(--fg-secondary); letter-spacing: var(--tracking-mono); }
.t-label { font-family: var(--font-mono); font-size: var(--fs-2xs); font-weight: 600; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--fg-muted); }