/* Icelab Design System tokens, copied verbatim from the DS project
   (tokens/colors.css, typography.css, spacing.css, effects.css). Do not edit here:
   change the DS first, then re-copy. */

/* ---------- colors ---------- */
:root {
  --brand-navy-900: #0A1B35;
  --brand-navy-800: #05336B;
  --brand-blue-700: #074FA5;
  --brand-blue-500: #3972B7;
  --brand-cyan-600: #0A99CB;
  --brand-cyan-500: #0CB4EF;
  --brand-ice-300:  #86DAF7;
  --brand-ice-200:  #B9DAF1;

  --navy-850: #0F2444;
  --navy-800: #132B50;
  --navy-750: #18345E;

  --ice-25:  #F6FAFD;
  --ice-50:  #EEF5FB;
  --ice-100: #DFEDF8;

  --slate-0:   #FFFFFF;
  --slate-50:  #F2F5F9;
  --slate-100: #E4EAF1;
  --slate-200: #D0D9E4;
  --slate-300: #AEBBCB;
  --slate-400: #8796AA;
  --slate-500: #64748B;
  --slate-600: #4A596E;
  --slate-700: #334155;
  --slate-800: #1F2A3C;

  --success-600: #0D6E4C;
  --warning-600: #A45A00;
  --error-600:   #C3283A;
  --error-300:   #FF8A96;

  --surface-page:   #FFFFFF;
  --surface-subtle: var(--ice-25);
  --surface-card:   #FFFFFF;
  --surface-raised: #FFFFFF;
  --surface-inset:  var(--ice-50);

  --text-strong: var(--brand-navy-900);
  --text-body:   var(--slate-700);
  --text-muted:  var(--slate-600);
  --text-link:   var(--brand-blue-700);
  --text-link-hover: var(--brand-navy-800);
  --text-accent: var(--brand-blue-700);
  --text-error:  var(--error-600);
  --text-success: var(--success-600);
  --success-bg: #EAF6F0;
  --success-border: #B7DEC9;

  --border:        var(--slate-100);
  --border-strong: var(--slate-200);
  --border-input:  var(--slate-300);

  --action-bg:       var(--brand-blue-700);
  --action-bg-hover: var(--brand-navy-800);
  --action-fg:       #FFFFFF;
  --action2-fg:      var(--brand-blue-700);
  --action2-border:  var(--slate-200);
  --action2-hover:   var(--ice-50);

  --focus:   var(--brand-blue-700);
  --graphic: var(--brand-cyan-500);
  --icon:    var(--brand-cyan-600);

  --logo-light: block;
  --logo-dark:  none;
  --motif-opacity: 0.07;
  --input-bg: #FFFFFF;
  --band-bg: var(--brand-navy-900);
  --grid-line: rgba(7, 79, 165, 0.07);
}

[data-theme="dark"] {
  --surface-page:   var(--brand-navy-900);
  --surface-subtle: var(--navy-850);
  --surface-card:   var(--navy-850);
  --surface-raised: var(--navy-800);
  --surface-inset:  var(--navy-800);

  --text-strong: #FFFFFF;
  --text-body:   #D2DDEB;
  --text-muted:  #A3B4CB;
  --text-link:   var(--brand-ice-300);
  --text-link-hover: #FFFFFF;
  --text-accent: var(--brand-cyan-500);
  --text-error:  var(--error-300);
  --text-success: #6FD8AE;
  --success-bg: rgba(111, 216, 174, 0.10);
  --success-border: rgba(111, 216, 174, 0.35);

  --border:        rgba(134, 218, 247, 0.14);
  --border-strong: rgba(134, 218, 247, 0.26);
  --border-input:  rgba(185, 218, 241, 0.40);

  --action-bg:       var(--brand-cyan-500);
  --action-bg-hover: var(--brand-ice-300);
  --action-fg:       var(--brand-navy-900);
  --action2-fg:      #FFFFFF;
  --action2-border:  rgba(185, 218, 241, 0.40);
  --action2-hover:   rgba(134, 218, 247, 0.10);

  --focus:   var(--brand-cyan-500);
  --graphic: var(--brand-cyan-500);
  --icon:    var(--brand-cyan-500);

  --logo-light: none;
  --logo-dark:  block;
  --motif-opacity: 0.10;
  --input-bg: var(--navy-850);
  --band-bg: var(--navy-800);
  --grid-line: rgba(134, 218, 247, 0.07);
}

/* ---------- typography ---------- */
:root {
  --font-display: "Sora", "Avenir Next", system-ui, sans-serif;
  --font-body: "Figtree", "Segoe UI", system-ui, sans-serif;
  --font-icon: "Material Symbols Outlined";
  --font-mono: "Google Sans Code", ui-monospace, "SFMono-Regular", monospace;

  --fs-display: 64px;  --lh-display: 1.05;  --fs-display-m: 40px;
  --fs-h1: 48px;       --lh-h1: 1.1;        --fs-h1-m: 34px;
  --fs-h2: 36px;       --lh-h2: 1.15;       --fs-h2-m: 28px;
  --fs-h3: 24px;       --lh-h3: 1.25;       --fs-h3-m: 20px;
  --fs-h4: 20px;       --lh-h4: 1.3;        --fs-h4-m: 18px;
  --fs-body-lg: 18px;  --lh-body-lg: 1.6;
  --fs-body: 16px;     --lh-body: 1.6;
  --fs-small: 14px;    --lh-small: 1.5;
  --fs-eyebrow: 13px;  --ls-eyebrow: 0.12em;
  --fs-caption: 12px;

  --tracking-display: -0.025em;
  --tracking-heading: -0.015em;
}

/* ---------- spacing ---------- */
:root {
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;
  --space-9: 96px; --space-10: 128px;

  --section-y: 96px;   --section-y-m: 64px;
  --container: 1200px; --gutter: 24px; --page-x: 40px; --page-x-m: 20px;
  --header-h: 72px;    --header-h-m: 64px;
}

/* ---------- effects ---------- */
:root {
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-full: 999px;

  --shadow-1: 0 1px 2px rgba(10, 27, 53, 0.06), 0 6px 16px rgba(10, 27, 53, 0.06);
  --shadow-2: 0 2px 6px rgba(10, 27, 53, 0.08), 0 16px 40px rgba(10, 27, 53, 0.16);
  --shadow-header: 0 1px 0 var(--border), 0 6px 20px rgba(10, 27, 53, 0.06);

  --focus-ring: 0 0 0 2px var(--surface-page), 0 0 0 4px var(--focus);

  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur-fast: 120ms;
  --dur: 200ms;

  --loop-rotate: 180s;
  --loop-float-amp: 6px;
  --loop-float-periods: 6.4s 7.2s 8s 6.8s 7.6s;
  --loop-float-phase: 1.3s;
  --ease-float: cubic-bezier(0.37, 0, 0.63, 1);
  --dur-slow: 280ms;
  --dur-reveal: 600ms;
  --stagger: 80ms;
  --dist-reveal: 8px;
  --parallax-photo: 16px;
}
@media (max-width: 767px) {
  :root { --loop-float-amp: 4px; }
}
[data-theme="dark"] {
  --shadow-1: none;
  --shadow-2: 0 16px 40px rgba(0, 0, 0, 0.35);
  --shadow-header: 0 1px 0 var(--border);
}