/* @dsCard group="Color & Type" */
/* ============================================================================
   Data Bastion — Design Tokens
   Source of truth for slides, demo (React + Tailwind), QWC, whitepaper figures.
   Locked names. Do not rename without updating tailwind.config.js, style-*.json,
   and the whitepaper Typst template.
   DNA: Engineered. Stratified. Quiet.
   ============================================================================ */

:root {
  /* ------------------------------------------------------------------------
     1. CORE PALETTE — ink scale, paper, slate (dark canvas)
     ------------------------------------------------------------------------ */

  /* Ink — neutral text + structure (used on light canvas) */
  --db-ink-900: #0B1220;  /* body text on paper; dark canvas; bookend slides */
  --db-ink-700: #1F2A33;  /* secondary text; dark panel chrome */
  --db-ink-500: #3D4757;  /* tertiary text; axis labels */
  --db-ink-300: #6B7A8F;  /* hairline labels; monospace meta; footer chrome */
  --db-ink-100: #E3E7EE;  /* dividers on light; body text on dark */

  /* Paper — light canvas */
  --db-paper:      #F7F8FA;  /* slide canvas; demo light-mode canvas */
  --db-paper-warm: #F4F1EC;  /* whitepaper body pages, cover canvas */

  /* Slate — dark canvas */
  --db-slate-bg:       #0E1620;  /* demo + QWC canvas; code blocks; map land */
  --db-slate-panel:    #161B22;  /* dark panel surface; tiles */
  --db-slate-hairline: #1F2937;  /* dark dividers; subtle gridlines */

  /* Map water (deeper than slate-bg for dark map style) */
  --db-slate-water:    #0A0F14;
  --db-slate-border:   #2A3441;  /* country borders on dark map */
  --db-slate-mid:      #3A4452;  /* roads, secondary axis on dark */

  /* ------------------------------------------------------------------------
     2. ACCENTS — one per role, never combined in the same view
     ------------------------------------------------------------------------ */

  /* Structural accent — CTAs, keyline frames, primary buttons */
  --db-bastion-blue:  #2B6CB0;

  /* Identity highlight — the active well, the one thing in focus.
     This is the single biggest coherence lever across slide/demo/QWC/paper. */
  --db-bastion-amber: #E8C547;

  /* Alarm — NPT, failure, "without us" callouts. Sparingly. */
  --db-bastion-rust:  #C0392B;

  /* Live data pulse — telemetry tick, streaming flash */
  --db-signal-cyan:   #22D3EE;

  /* Healthy status dot only — never as a fill color anywhere else */
  --db-signal-green:  #10B981;

  /* ------------------------------------------------------------------------
     3. DOMAIN ACCENTS — interior of data viz only, never chrome
     ------------------------------------------------------------------------ */
  --db-domain-gg:         #6B5B95;  /* Geo & Geo: subsurface, seismic */
  --db-domain-drilling:   #C2701C;  /* Well construction, drilling */
  --db-domain-production: #2F855A;  /* Production, hydrocarbon flow */

  /* ------------------------------------------------------------------------
     4. CATEGORICAL CHART PALETTE — fixed order, series 1 = signal blue
     Audit per chart. Coherence rule: series 1 is ALWAYS --db-chart-1.
     ------------------------------------------------------------------------ */
  --db-chart-1: #4A9EFF;  /* signal blue */
  --db-chart-2: #E89B3C;  /* heritage amber */
  --db-chart-3: #7BC96F;  /* production green */
  --db-chart-4: #C76B98;  /* anomaly magenta */
  --db-chart-5: #9B8FE5;  /* interpretive violet */
  --db-chart-6: #D9D2C5;  /* neutral bone */

  /* ------------------------------------------------------------------------
     5. SEQUENTIAL RAMP — cividis (colorblind-safe, perceptually uniform)
     For GR, porosity, saturation, pressure measurements.
     ------------------------------------------------------------------------ */
  --db-seq-0: #00224E;
  --db-seq-1: #123570;
  --db-seq-2: #3B496C;
  --db-seq-3: #575C6D;
  --db-seq-4: #707173;
  --db-seq-5: #8A8779;
  --db-seq-6: #A69D75;
  --db-seq-7: #C6B56C;
  --db-seq-8: #E7CE57;
  --db-seq-9: #FDE737;

  /* ------------------------------------------------------------------------
     6. DIVERGING RAMP — RdBu recentered (Cynthia Brewer)
     For residuals, plan-vs-actual, anomalies. Use sparingly.
     ------------------------------------------------------------------------ */
  --db-div-neg-2: #B2182B;
  --db-div-neg-1: #D6604D;
  --db-div-neg-0: #F4A582;
  --db-div-mid:   #F7F7F7;
  --db-div-pos-0: #92C5DE;
  --db-div-pos-1: #4393C3;
  --db-div-pos-2: #2166AC;

  /* ------------------------------------------------------------------------
     7. WELL STATUS — categorical (map markers, lists, tables)
     ------------------------------------------------------------------------ */
  --db-well-active:    #E8C547;  /* alias of bastion-amber: selected/in-focus */
  --db-well-producing: #4A9EFF;
  --db-well-drilling:  #E89B3C;
  --db-well-completed: #7BC96F;
  --db-well-shut-in:   #6B7A8F;
  --db-well-abandoned: #3D4757;

  /* ------------------------------------------------------------------------
     8. CODE / SYNTAX (Tokyo Night restrained, used on slate-bg)
     ------------------------------------------------------------------------ */
  --db-code-bg:       #0E1620;
  --db-code-text:     #C0CAF5;
  --db-code-keyword:  #7AA2F7;
  --db-code-string:   #9ECE6A;
  --db-code-comment:  #565F89;
  --db-code-number:   #FF9E64;
  --db-code-keyline:  #2B6CB0;

  /* ------------------------------------------------------------------------
     9. TYPOGRAPHY — families
     ------------------------------------------------------------------------ */
  --db-font-display: "Söhne", "Inter Tight", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --db-font-body:    "Söhne", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --db-font-mono:    "JetBrains Mono", "JetBrains Mono NL", "SF Mono", "Menlo", monospace;

  /* Weights — locked */
  --db-weight-regular:  400;
  --db-weight-medium:   500;
  --db-weight-semibold: 600;
  --db-weight-halbfett: 600;  /* Söhne Halbfett ≈ 600 */

  /* ------------------------------------------------------------------------
     10. TYPE SCALE — slide / web / print (px for web, pt for slide/print
         documented in comments; CSS uses px for web consumers)
     ------------------------------------------------------------------------ */
  /* Display XL — bookend slide titles / web hero / paper cover           */
  --db-size-display-xl: 72px;   /* slide: 120pt | paper: 48pt              */
  /* Display L — section dividers                                         */
  --db-size-display-l:  40px;   /* slide: 56pt  | paper: 28pt              */
  /* H1                                                                   */
  --db-size-h1:         32px;   /* slide: 40pt  | paper: 20pt              */
  /* H2                                                                   */
  --db-size-h2:         22px;   /* slide: 28pt  | paper: 14pt              */
  /* Body L                                                               */
  --db-size-body-l:     16px;   /* slide: 24pt  | paper: 11pt              */
  /* Body                                                                 */
  --db-size-body:       14px;   /* slide: 22pt min | paper: 10pt           */
  /* Mono meta — uppercased labels, tracking +0.08em                      */
  --db-size-meta:       12px;   /* slide: 16pt  | paper:  9pt              */
  /* Numerals (telemetry / KPI hero)                                      */
  --db-size-numeral:    36px;   /* slide hero stat: 96–240pt               */

  /* Leading (line-height as unitless multiplier) */
  --db-leading-tight:   1.10;
  --db-leading-snug:    1.30;
  --db-leading-base:    1.45;

  /* Tracking */
  --db-track-display:   -0.01em;   /* -1% */
  --db-track-body:      -0.005em;  /* -0.5% */
  --db-track-meta:       0.08em;   /* +8%, uppercase mono */

  /* OpenType: tabular lining figures everywhere numerals matter */
  --db-font-feature-tabular: "tnum" 1, "lnum" 1;

  /* ------------------------------------------------------------------------
     11. SPACING SCALE — 8px base, 4px sub-unit for dense data UI only.
         Allowed values: 4 / 8 / 16 / 24 / 32 / 48 / 64 / 80 / 96.
         Nothing else. No 12, 20, 28, 36.
     ------------------------------------------------------------------------ */
  --db-space-0:   0;
  --db-space-1:   4px;
  --db-space-2:   8px;
  --db-space-3:  16px;
  --db-space-4:  24px;
  --db-space-5:  32px;
  --db-space-6:  48px;
  --db-space-7:  64px;
  --db-space-8:  80px;
  --db-space-9:  96px;

  /* ------------------------------------------------------------------------
     12. RADII — 0, 2, 4 only. 16px+ is forbidden.
     ------------------------------------------------------------------------ */
  --db-radius-0: 0;
  --db-radius-1: 2px;
  --db-radius-2: 4px;

  /* ------------------------------------------------------------------------
     13. BORDERS / HAIRLINES
     ------------------------------------------------------------------------ */
  --db-border-hairline-light: 1px solid var(--db-ink-100);
  --db-border-hairline-dark:  1px solid var(--db-slate-hairline);
  --db-border-keyline-blue:   1px solid var(--db-bastion-blue);

  /* ------------------------------------------------------------------------
     14. MOTION — restrained. No bouncy easings.
     ------------------------------------------------------------------------ */
  --db-ease-out:  cubic-bezier(0.2, 0.0, 0.0, 1.0);
  --db-ease-in-out: cubic-bezier(0.4, 0.0, 0.2, 1.0);
  --db-duration-fast: 120ms;
  --db-duration-base: 180ms;
  --db-duration-slow: 1200ms;  /* shimmer, flyTo */

  /* ------------------------------------------------------------------------
     15. Z-INDEX (named scale; no magic numbers in components)
     ------------------------------------------------------------------------ */
  --db-z-base:    0;
  --db-z-raised:  10;
  --db-z-overlay: 100;
  --db-z-drawer:  200;
  --db-z-modal:   300;
  --db-z-toast:   400;

  /* ------------------------------------------------------------------------
     16. GRID — base unit + key breakpoints for the demo
     ------------------------------------------------------------------------ */
  --db-grid-unit:        8px;
  --db-grid-cols:        12;
  --db-grid-gutter:     24px;
  --db-grid-margin:     80px;   /* outer margin demo + paper */
  --db-grid-margin-slide-x: 96px;
  --db-grid-margin-slide-y: 80px;
  --db-grid-container:  1440px;
  --db-grid-min:        1280px;  /* below shows "optimized for 1440+" */

  /* ------------------------------------------------------------------------
     17. COMPONENT TOKENS (semantic — let components reference these,
         not raw palette values, so themes can swap.)
     ------------------------------------------------------------------------ */

  /* Light context (slides, whitepaper, light-map figures) */
  --db-canvas:        var(--db-paper);
  --db-canvas-warm:   var(--db-paper-warm);
  --db-surface:       #FFFFFF;             /* sparingly: table rows */
  --db-surface-alt:   #F0F3F8;             /* alternating data table row */
  --db-text-primary:  var(--db-ink-900);
  --db-text-secondary:var(--db-ink-500);
  --db-text-tertiary: var(--db-ink-300);
  --db-divider:       var(--db-ink-100);

  /* Dark context (demo, QWC, code blocks, dark map) is opted into via
     [data-theme="dark"] below. */
}

/* ============================================================================
   DARK THEME — applied by adding data-theme="dark" to <html> or any subtree
   (e.g. the demo's app shell, or a dark code block on a light slide).
   ============================================================================ */
[data-theme="dark"] {
  --db-canvas:         var(--db-slate-bg);
  --db-canvas-warm:    var(--db-slate-bg);
  --db-surface:        var(--db-slate-panel);
  --db-surface-alt:    #1A2030;
  --db-text-primary:   var(--db-ink-100);
  --db-text-secondary: var(--db-ink-300);
  --db-text-tertiary:  var(--db-slate-mid);
  --db-divider:        var(--db-slate-hairline);
}

/* ============================================================================
   BASE — minimal, opinion-light reset for slide-master and previews.
   The React demo will provide its own root styles; this file should be
   importable everywhere without conflict.
   ============================================================================ */
html { font-family: var(--db-font-body); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body { font-feature-settings: var(--db-font-feature-tabular); }
code, pre, kbd, samp, .db-mono { font-family: var(--db-font-mono); }
.db-display { font-family: var(--db-font-display); letter-spacing: var(--db-track-display); line-height: var(--db-leading-tight); }
.db-meta { font-family: var(--db-font-mono); text-transform: uppercase; letter-spacing: var(--db-track-meta); font-size: var(--db-size-meta); color: var(--db-ink-300); }
.db-numeral { font-family: var(--db-font-mono); font-feature-settings: var(--db-font-feature-tabular); }

/* Cohesion utility: the active-well amber thread.
   Engineering — use this class on any element that represents the
   currently-focused well (map marker, list row, KPI value, log curve label). */
.db-active-well { color: var(--db-bastion-amber); }
.db-active-well-bg { background: var(--db-bastion-amber); }
.db-active-well-stroke { stroke: var(--db-bastion-amber); }

/* ============================================================================
   OSDU additions — round 2
   Minimal evolution for the /OSDU landing page only. The baseline triad
   (amber / blue / cyan) stays the system. --osdu-accent is reserved for
   structural marks unique to this story: section hairlines and the hero
   number underline. Never apply to body copy.
   ============================================================================ */
:root {
  /* Deep teal — "subsurface data" cue. Reads as a cousin of signal-cyan
     (#22D3EE) but desaturated and pushed deeper so it never competes with
     the cyan live pulse or with bastion-amber identity. Sits well on
     --db-slate-bg (#0E1620) at full opacity for 1px rules. */
  --osdu-accent:        #2DD4BF;
  --osdu-accent-soft:   rgba(45, 212, 191, 0.10);  /* 10% tint for fills */
  --osdu-hairline:      rgba(45, 212, 191, 0.18);  /* 1px low-opacity divider */

  --osdu-data-mono:     "JetBrains Mono", "JetBrains Mono NL", "SF Mono",
                        ui-monospace, "Menlo", monospace;
  --osdu-stat-size:     clamp(2.5rem, 6vw, 5rem);
}