/* ==========================================================================
   Marine Engineering Dynamics — design tokens
   Single source of truth for colour, type, spacing, radius and motion.
   Documented in /brand/STYLE_GUIDE.md. Reuse this file in any MED surface
   (website, software UI, report templates, slides).
   ========================================================================== */

:root {
  /* ---- Base palette (raw values — prefer semantic tokens below) --------- */

  /* Abyss: blue-tinted near-blacks for dark surfaces */
  --abyss-950: #06080c;
  --abyss-900: #0a0e14;
  --abyss-850: #0e131b;
  --abyss-800: #131a24;
  --abyss-700: #1a2330;
  --abyss-600: #243040;
  --abyss-500: #334155;

  /* Mist: cool greys for text on dark */
  --mist-50:  #f3f6fa;
  --mist-100: #e3e9f1;
  --mist-300: #aab6c5;
  --mist-500: #808da2;
  --mist-700: #4c586a;

  /* Signal: primary brand accent — sonar cyan */
  --signal-200: #b5ecff;
  --signal-300: #7fdcfb;
  --signal-400: #4cc9f0;
  --signal-500: #1fa9d6;
  --signal-600: #116f94;
  --signal-800: #0b3a4d;

  /* Resonance: secondary accent — amber, used for peaks, limits, attention */
  --resonance-300: #ffd08a;
  --resonance-400: #ffb547;
  --resonance-500: #f59e0b;
  --resonance-700: #7a4a06;

  /* Floe: ice-class tint */
  --floe-300: #cfe3ff;
  --floe-400: #a9cbff;

  /* Status */
  --ok-400:     #5ee0a0;
  --danger-400: #ff6b6b;

  /* ---- Semantic tokens (light = website default) ----------------------- */
  /* Neutral warm-grey canvas in the supabase.com light-theme register:
     hairline borders, white elevated surfaces, Signal cyan as the brand. */

  --color-bg:           #fbfbfa;
  --color-bg-sunken:    #f4f4f3;
  --color-surface-1:    #ffffff;
  --color-surface-2:    #ffffff;
  --color-surface-3:    #f0f0ef;

  --color-border:        #ececea;
  --color-border-strong: #d8d8d5;
  --color-border-accent: rgba(17, 111, 148, 0.38);

  --color-text:         #171717;
  --color-text-muted:   #5c5c5a;
  --color-text-subtle:  #737371;
  --color-text-faint:   #a3a3a0;

  --color-accent:          var(--signal-600);
  --color-accent-hover:    #0b5c78;
  --color-accent-strong:   var(--signal-500);
  --color-accent-contrast: #ffffff;
  --color-accent-soft:     rgba(31, 169, 214, 0.10);
  --color-accent-glow:     rgba(31, 169, 214, 0.16);

  --color-highlight:       #9a5b00;
  --color-highlight-soft:  rgba(245, 158, 11, 0.12);

  /* Logo mark. Kept separate from --color-text/--color-highlight so the mark
     stays charcoal + true amber even where body copy needs a darker amber. */
  --color-mark:            var(--color-text);
  --color-mark-accent:     var(--resonance-500);

  --color-ice:             #3f73c4;
  --color-ok:              #1f9d62;
  --color-danger:          #d64545;

  /* Data-viz series order (charts, mode shapes, Campbell orders) */
  --viz-1: var(--signal-600);
  --viz-2: #d97f06;
  --viz-3: #7c5cd6;
  --viz-4: #1f9d62;
  --viz-5: #3f73c4;
  --viz-6: #c2417f;
  --viz-grid: rgba(23, 23, 23, 0.055);
  --viz-axis: rgba(23, 23, 23, 0.22);

  color-scheme: light;

  /* ---- Typography ------------------------------------------------------- */

  --font-sans: "Geist", "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "Geist Mono", "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --text-xs:   0.75rem;   /* 12 — mono labels, captions */
  --text-sm:   0.875rem;  /* 14 — secondary UI */
  --text-base: 1rem;      /* 16 — body */
  --text-lg:   1.125rem;  /* 18 — lead body */
  --text-xl:   1.375rem;  /* 22 — card titles */
  --text-2xl:  1.75rem;   /* 28 — H3 */
  --text-3xl:  clamp(2rem, 1.4rem + 2.2vw, 2.75rem);   /* H2 */
  --text-4xl:  clamp(2.5rem, 1.5rem + 4.2vw, 4.75rem); /* H1 / hero */

  --leading-tight: 1.08;
  --leading-snug:  1.3;
  --leading-body:  1.6;

  --tracking-tight: -0.035em;
  --tracking-mono:  0.08em;

  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semibold: 600;

  /* ---- Space, radius, layout ------------------------------------------- */

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  --container: 1200px;
  --gutter: clamp(1rem, 0.5rem + 2.5vw, 2rem);

  /* ---- Effects & motion ------------------------------------------------- */

  --shadow-card: 0 1px 2px rgba(23, 23, 23, 0.04), 0 12px 32px -16px rgba(23, 23, 23, 0.12);
  --shadow-glow: 0 0 0 1px var(--color-border-accent), 0 16px 40px -18px var(--color-accent-glow);

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --duration-fast: 140ms;
  --duration-base: 260ms;
  --duration-slow: 600ms;
}

/* Dark theme — simulation workspace, software UI.
   Apply with data-theme="dark" on any container. */
[data-theme="dark"] {
  --color-bg:           var(--abyss-900);
  --color-bg-sunken:    var(--abyss-950);
  --color-surface-1:    var(--abyss-850);
  --color-surface-2:    var(--abyss-800);
  --color-surface-3:    var(--abyss-700);

  --color-border:        #1c2532;
  --color-border-strong: #2b3747;
  --color-border-accent: rgba(76, 201, 240, 0.45);

  --color-text:         var(--mist-50);
  --color-text-muted:   var(--mist-300);
  --color-text-subtle:  var(--mist-500);
  --color-text-faint:   var(--mist-700);

  --color-accent:          var(--signal-400);
  --color-accent-hover:    var(--signal-300);
  --color-accent-strong:   var(--signal-200);
  --color-accent-contrast: var(--abyss-950);
  --color-accent-soft:     rgba(76, 201, 240, 0.10);
  --color-accent-glow:     rgba(76, 201, 240, 0.22);

  --color-highlight:       var(--resonance-400);
  --color-highlight-soft:  rgba(255, 181, 71, 0.12);

  --color-mark:            var(--color-text);
  --color-mark-accent:     var(--resonance-400);

  --color-ice:             var(--floe-400);
  --color-ok:              var(--ok-400);
  --color-danger:          var(--danger-400);

  --viz-1: var(--signal-400);
  --viz-2: var(--resonance-400);
  --viz-3: #a78bfa;
  --viz-4: var(--ok-400);
  --viz-5: var(--floe-400);
  --viz-6: #f472b6;
  --viz-grid: rgba(170, 182, 197, 0.08);
  --viz-axis: rgba(170, 182, 197, 0.28);

  --shadow-card: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 20px 40px -24px rgba(0, 0, 0, 0.7);
  --shadow-glow: 0 0 0 1px var(--color-border-accent), 0 0 32px -6px var(--color-accent-glow);

  color-scheme: dark;
}