/* ============================================================================
   Nomad Design System — Foundations
   Colors, typography, spacing, radius, shadows, motion
   Source: website/src/@chakra-ui/theme.ts + recipes.ts + GlobalStyles
============================================================================ */

/* -------- Fonts -------- */

/* Font URLs are relative to THIS FILE (fonts/ next to tokens.css), not to the
   site root: a CSS url() resolves against the stylesheet, so the same file
   works when it is linked from any depth and also inside the nomad-ops.io
   portal's proxy, where the whole site sits under /api/sandbox/ and a
   root-absolute /design/fonts/... would 404 against the portal. Anything that
   INLINES this file into a page (tools/_shared/design.py build_head) must
   rewrite these to be relative to the page instead — see there. */

@font-face {
  font-family: 'Libre Franklin';
  font-weight: 400;
  font-display: swap;
  src: url('fonts/LibreFranklin-Regular.woff') format('woff');
}
@font-face {
  font-family: 'Libre Franklin';
  font-weight: 600;
  font-display: swap;
  src: url('fonts/LibreFranklin-SemiBold.woff') format('woff');
}
@font-face {
  font-family: 'Libre Franklin';
  font-weight: 700;
  font-display: swap;
  src: url('fonts/LibreFranklin-Bold.woff') format('woff');
}
@font-face {
  font-family: 'Degular';
  font-weight: 400;
  font-display: swap;
  src: url('fonts/Degular-Regular.woff') format('woff');
}
@font-face {
  font-family: 'Degular';
  font-weight: 600;
  font-display: swap;
  src: url('fonts/Degular-Semibold.otf') format('opentype');
}
@font-face {
  /* Degular Display — used only for the "subH1" display treatment (uppercase, bold) */
  font-family: 'Degular Display';
  font-weight: 900;
  font-display: swap;
  src: url('fonts/Degular_Display-Black.woff') format('woff');
}

:root {
  /* ================================================================
     COLOR SCALES — six brand families + link, each 50..950
     Semantic families: forest (primary brand dark), lake (primary accent teal),
     link (secondary blue CTA), sun (warm accent), rock (coral accent),
     twilight (peachy accent)
     ================================================================ */

  /* Lake — primary teal accent, used for fg text on brand surfaces */
  --lake-50:  #e6f2f0;
  --lake-100: #b7dfd8;
  --lake-200: #93cac1;
  --lake-300: #71b5aa;
  --lake-400: #509f94;
  --lake-500: #2f8a7e;
  --lake-600: #027468;  /* solid / border — logo green */
  --lake-700: #015a51;  /* fg text on light */
  --lake-800: #00423b;
  --lake-900: #002b26;
  --lake-950: #001512;

  /* Forest — primary dark brand color, used for body text + footer */
  --forest-50:  #e6ebec;
  --forest-100: #b3cdd5;
  --forest-200: #88afb9;
  --forest-300: #62919c;
  --forest-400: #3e737e;
  --forest-500: #1f5660;
  --forest-600: #023a41;  /* footer bg, body copy color */
  --forest-700: #013037;
  --forest-800: #00272d;
  --forest-900: #001e23;
  --forest-950: #001418;

  /* Link — secondary CTA blue, full-bleed hero bg */
  --link-50:  #e5eff4;
  --link-100: #c6d6e9;
  --link-200: #9bbfe4;
  --link-300: #66a9e0;
  --link-400: #4791c8;
  --link-500: #297aaf;
  --link-600: #006494;
  --link-700: #004e75;
  --link-800: #003a58;
  --link-900: #00263c;
  --link-950: #001321;

  /* Rock — muted coral */
  --rock-50:  #f9eeed;
  --rock-100: #f1d4d3;
  --rock-200: #eabbb8;
  --rock-300: #e4a09c;
  --rock-400: #df847e;
  --rock-500: #dc645a;
  --rock-600: #c0544a;
  --rock-700: #963f38;
  --rock-800: #6d2c26;
  --rock-900: #471a16;
  --rock-950: #230907;

  /* Sun — warm peach/orange */
  --sun-50:  #fef6f2;
  --sun-100: #fce6df;
  --sun-200: #fad6c9;
  --sun-300: #f8c5b3;
  --sun-400: #f6b59b;
  --sun-500: #f4a480;
  --sun-600: #f2935d;
  --sun-700: #bd6b39;
  --sun-800: #844926;
  --sun-900: #4f2a14;
  --sun-950: #1f0d04;

  /* Twilight — deeper coral/terracotta accent */
  --twilight-50:  #f6eeed;
  --twilight-100: #efdcd9;
  --twilight-200: #ebc9c4;
  --twilight-300: #eab4ad;
  --twilight-400: #eb9f93;
  --twilight-500: #ed8773;
  --twilight-600: #f16b4c;
  --twilight-700: #bc4e2e;
  --twilight-800: #86351d;
  --twilight-900: #541e0e;
  --twilight-950: #250903;

  /* Neutrals */
  --white: #ffffff;
  --black: #000000;

  /* ================================================================
     SEMANTIC COLOR TOKENS
     Mirrors Chakra's `colorPalette` system: every family exposes
     solid/border/fg/muted/subtle/emphasized/focusRing.
     ================================================================ */

  /* Primary brand — forest (text, headings, footer) */
  --brand-primary:          var(--forest-600);
  --brand-primary-fg:       var(--forest-700);
  --brand-primary-contrast: var(--white);
  --brand-primary-muted:    var(--forest-100);

  /* Accent brand — lake (logo green, icons, links on dark) */
  --brand-accent:           var(--lake-600);
  --brand-accent-fg:        var(--lake-700);
  --brand-accent-muted:     var(--lake-50);
  --brand-accent-subtle:    var(--lake-100);

  /* CTA — link blue (primary buttons, hero sections) */
  --cta:                    var(--link-600);
  --cta-fg:                 var(--link-700);
  --cta-contrast:           var(--white);

  /* Page surfaces */
  --bg-page:    var(--white);
  --bg-soft:    var(--lake-50);     /* hero bands, lifted sections */
  --bg-softer:  var(--link-50);     /* alt section banding */
  --bg-card:    var(--white);
  --bg-dark:    var(--forest-600);  /* footer / inverted sections */
  --bg-cta:     var(--link-600);    /* full-bleed CTA bands */

  /* Foreground text */
  --fg-default:  var(--forest-600); /* body copy, headings on light */
  --fg-muted:    var(--forest-500);
  --fg-subtle:   var(--forest-400);
  --fg-inverse:  var(--white);
  --fg-link:     var(--link-600);
  --fg-on-dark:  var(--white);

  /* Borders & dividers */
  --border-subtle:    rgba(2, 58, 65, 0.08);
  --border-default:   rgba(2, 58, 65, 0.16);
  --border-strong:    var(--forest-600);
  --border-input:     rgba(2, 58, 65, 0.2);

  /* Status (semantic) */
  --status-success: var(--lake-600);
  --status-info:    var(--link-600);
  --status-warning: var(--sun-700);
  --status-danger:  var(--twilight-700);

  /* ================================================================
     TYPOGRAPHY
     Two families only: Libre Franklin (body + most headings),
     Degular (h1/h2 display serif-ish), Degular Display (subH1 uppercase).
     ================================================================ */

  --font-body:            'Libre Franklin', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-heading:         'Libre Franklin', system-ui, -apple-system, sans-serif;
  --font-display:         'Degular', 'Libre Franklin', sans-serif;
  --font-display-black:   'Degular Display', 'Degular', 'Libre Franklin', sans-serif;

  /* Weights used in the system */
  --fw-regular:  400;
  --fw-semibold: 600;   /* primary emphasis weight — used for CTAs, titles */
  --fw-bold:     700;
  --fw-black:    900;

  /* Font sizes (Chakra token set) */
  --fs-10: 0.625rem;  /* 10px */
  --fs-12: 0.75rem;   /* 12px — legal, fine print */
  --fs-14: 0.875rem;  /* 14px */
  --fs-16: 1rem;      /* 16px — body default */
  --fs-18: 1.125rem;  /* 18px — primary subheading */
  --fs-20: 1.25rem;   /* 20px */
  --fs-21: 1.3125rem; /* 21px — h5/h6 */
  --fs-28: 1.75rem;   /* 28px — h4 */
  --fs-32: 2rem;      /* 32px — h3 */
  --fs-38: 2.375rem;  /* 38px — h2 */
  --fs-48: 3rem;      /* 48px — h1 */

  /* ================================================================
     SPACING (Chakra default scale, rem-based)
     ================================================================ */
  --sp-0:   0;
  --sp-1:   0.25rem; /*  4px */
  --sp-2:   0.5rem;  /*  8px */
  --sp-3:   0.75rem; /* 12px */
  --sp-4:   1rem;    /* 16px */
  --sp-5:   1.25rem; /* 20px */
  --sp-6:   1.5rem;  /* 24px */
  --sp-8:   2rem;    /* 32px */
  --sp-10:  2.5rem;  /* 40px */
  --sp-12:  3rem;    /* 48px */
  --sp-16:  4rem;    /* 64px */
  --sp-20:  5rem;    /* 80px */
  --sp-28:  7rem;    /* 112px — Section vertical rhythm (default) */

  /* Layout */
  --max-w:          1440px;
  --max-w-content:  900px;
  --max-w-narrow:   600px;
  --nav-height:     72px;

  /* ================================================================
     RADIUS & SHADOW
     Chakra's default radii; shadows are used sparingly (mostly on cards)
     ================================================================ */
  --radius-xs:  2px;
  --radius-sm:  4px;
  --radius-md:  6px;
  --radius-lg:  8px;   /* standard card/button radius */
  --radius-xl:  12px;
  --radius-2xl: 16px;
  --radius-full: 9999px;

  --shadow-sm:   0 1px 2px rgba(2, 58, 65, 0.06);
  --shadow-card: 0 1px 3px rgba(2, 58, 65, 0.08), 0 4px 12px rgba(2, 58, 65, 0.06);
  --shadow-lg:   0 10px 30px rgba(2, 58, 65, 0.12);
  --shadow-focus: 0 0 0 2px var(--lake-600);

  /* ================================================================
     MOTION
     Nomad uses subtle, quick easing. No bounces, no playful springs.
     ================================================================ */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast:   120ms;
  --dur-base:   200ms;
  --dur-slow:   320ms;
}

/* ============================================================================
   SEMANTIC ELEMENT STYLES
   Applying the recipes from @chakra-ui/recipes.ts to HTML tags.
============================================================================ */

html, body {
  font-family: var(--font-body);
  font-size: var(--fs-16);
  color: var(--fg-default);
  background: var(--bg-page);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* Headings — h1/h2 use Degular (display), h3+ switch to Libre Franklin */
h1, .h1 {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-48);
  line-height: 52px;
  color: var(--fg-default);
  letter-spacing: -0.01em;
}

h2, .h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-38);
  line-height: 42px;
  color: var(--fg-default);
}

/* subH1 — the uppercase "rotating word" display treatment used in the hero.
   Applied inline inside an h1. */
.subH1 {
  font-family: var(--font-display-black);
  font-weight: var(--fw-black);
  font-size: var(--fs-48);
  line-height: 52px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

h3, .h3 {
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-32);
  line-height: 38px;
}

h4, .h4 {
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-28);
  line-height: 28px;
}

h5, .h5 {
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-21);
  line-height: 24px;
}

h6, .h6 {
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: var(--fs-21);
  line-height: 24px;
}

p, .body {
  font-family: var(--font-body);
  font-size: var(--fs-16);
  line-height: 1.5;
}

.text-title {
  font-size: var(--fs-16);
  font-weight: var(--fw-semibold);
}

.text-subheading {
  font-size: var(--fs-18);
  line-height: 24px;
}

.text-italic {
  font-size: var(--fs-16);
  font-style: italic;
}

small, .fine-print {
  font-size: var(--fs-12);
  line-height: 1.4;
}

/* Links — always semibold, primary = link blue, secondary = black */
a, .link {
  color: var(--fg-link);
  font-weight: var(--fw-semibold);
  text-decoration: none;
  transition: text-decoration var(--dur-fast) var(--ease-standard);
}
a:hover, .link:hover { text-decoration: underline; }
a.link-secondary { color: var(--black); }

/* Lucide icons — global stroke override from GlobalStyles */
.lucide { stroke-width: 1.75px; }