/* ============================================================
   THALASSYS DESIGN SYSTEM — Foundations
   Direction: "Instrument" — bold, device-forward, coffee-machine
   ease — wrapped in immersive ocean photo panels.
   ------------------------------------------------------------
   Fonts loaded via Google Fonts CDN below. For production,
   self-host Schibsted Grotesk + JetBrains Mono (see README).
   ============================================================ */

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

:root {
  /* ---------- BRAND / OCEAN SCALE ---------- */
  --ocean-900: #06202f;   /* ink — darkest backgrounds          */
  --ocean-800: #0a2a43;   /* navy — primary brand color         */
  --ocean-700: #103a55;   /* deep teal-navy                     */
  --ocean-600: #1f6f8b;   /* teal — secondary                   */
  --ocean-500: #2e8aa3;   /* mid teal                           */
  --ocean-400: #46b3c4;   /* cyan — accent / interactive        */
  --ocean-300: #7fcdd9;   /* light cyan                         */
  --ocean-200: #b6e2e8;   /* pale cyan                          */
  --ocean-100: #dceff2;   /* very pale                          */
  --ocean-50:  #eef6f7;   /* mist — light surface tint          */

  /* ---------- NEUTRALS (cool, navy-tuned) ---------- */
  --gray-900: #0d1b24;
  --gray-700: #2c3e47;
  --gray-500: #5a6b74;
  --gray-400: #8696a0;
  --gray-300: #c4d0d5;
  --gray-200: #e0e8eb;
  --gray-100: #eef3f5;
  --white:    #ffffff;

  /* ---------- SEMANTIC ---------- */
  --success: #2f9e7d;   /* sea green   */
  --warning: #e0a13c;   /* buoy amber  */
  --error:   #d6504a;   /* coral red   */
  --info:    var(--ocean-400);

  /* ---------- ROLE TOKENS ---------- */
  --bg:            var(--white);
  --bg-tint:       var(--ocean-50);
  --bg-inverse:    var(--ocean-900);
  --surface:       var(--white);
  --fg:            var(--ocean-900);   /* primary text       */
  --fg-2:          var(--gray-500);    /* secondary text     */
  --fg-3:          var(--gray-400);    /* tertiary / captions*/
  --fg-inverse:    var(--white);
  --brand:         var(--ocean-800);   /* navy               */
  --accent:        var(--ocean-400);   /* cyan — CTAs        */
  --accent-press:  var(--ocean-600);   /* teal — pressed     */
  --line:          var(--gray-200);    /* hairline borders   */
  --line-strong:   var(--gray-300);

  /* ---------- TYPE FAMILIES ---------- */
  --font-display: 'Schibsted Grotesk', system-ui, -apple-system, sans-serif;
  --font-body:    'Schibsted Grotesk', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* ---------- TYPE SCALE (px / line-height) ---------- */
  --t-display-xl: 700 64px/0.98 var(--font-display);
  --t-display-l:  800 48px/1.0  var(--font-display);
  --t-h1:         800 36px/1.05 var(--font-display);
  --t-h2:         700 28px/1.1  var(--font-display);
  --t-h3:         700 22px/1.2  var(--font-display);
  --t-body-l:     400 18px/1.55 var(--font-body);
  --t-body:       400 16px/1.55 var(--font-body);
  --t-body-s:     400 14px/1.5  var(--font-body);
  --t-label:      600 13px/1.2  var(--font-body);
  --t-mono:       500 13px/1.4  var(--font-mono);
  --t-mono-micro: 500 11px/1.3  var(--font-mono);

  /* mono kicker — the signature "instrument label" */
  --kicker-spacing: 0.16em;

  /* ---------- SPACING (4px base) ---------- */
  --s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
  --s-5: 24px;  --s-6: 32px;  --s-7: 48px;  --s-8: 64px;  --s-9: 96px;

  /* ---------- RADII ---------- */
  --r-sm: 8px;  --r-md: 12px;  --r-lg: 16px;  --r-xl: 24px;  --r-pill: 999px;

  /* ---------- SHADOWS (navy-tinted, soft) ---------- */
  --shadow-sm:  0 1px 2px rgba(6,32,47,.06), 0 2px 6px rgba(6,32,47,.05);
  --shadow-md:  0 6px 20px rgba(10,42,67,.10);
  --shadow-lg:  0 12px 34px rgba(6,32,47,.16);
  --shadow-cyan: 0 8px 22px rgba(31,111,139,.35);

  /* ---------- MOTION ---------- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur:  220ms;
}

/* ============================================================
   SEMANTIC ELEMENT DEFAULTS — optional helpers
   ============================================================ */
.th-display-xl { font: var(--t-display-xl); letter-spacing: -0.03em; color: var(--fg); }
.th-display-l  { font: var(--t-display-l);  letter-spacing: -0.025em; color: var(--fg); }
.th-h1 { font: var(--t-h1); letter-spacing: -0.02em; color: var(--fg); }
.th-h2 { font: var(--t-h2); letter-spacing: -0.02em; color: var(--fg); }
.th-h3 { font: var(--t-h3); letter-spacing: -0.01em; color: var(--fg); }
.th-body-l { font: var(--t-body-l); color: var(--fg); }
.th-body   { font: var(--t-body); color: var(--fg); }
.th-body-s { font: var(--t-body-s); color: var(--fg-2); }

/* the signature mono kicker */
.th-kicker {
  font: var(--t-mono-micro);
  letter-spacing: var(--kicker-spacing);
  text-transform: uppercase;
  color: var(--ocean-600);
}
.th-kicker--ondark { color: var(--ocean-300); }