/* ============================================================
   Orbittas Design System — Foundations
   colors_and_type.css
   ============================================================ */

/* ---------- Font faces ---------- */

/* Aktiv Grotesk — display + UI sans (primary brand font) */
@font-face {
  font-family: "Aktiv Grotesk";
  src: url("../fonts/AktivGrotesk-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Aktiv Grotesk";
  src: url("../fonts/AktivGrotesk-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Aktiv Grotesk";
  src: url("../fonts/AktivGrotesk-Italic.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Aktiv Grotesk";
  src: url("../fonts/AktivGrotesk-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Aktiv Grotesk";
  src: url("../fonts/AktivGrotesk-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Aktiv Grotesk";
  src: url("../fonts/AktivGrotesk-XBold.ttf") format("truetype");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Aktiv Grotesk";
  src: url("../fonts/AktivGrotesk-Black.ttf") format("truetype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* Inter — secondary UI sans (body / small text / dashboards) */
@font-face {
  font-family: "Inter";
  src: url("../fonts/Inter-Light.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/Inter-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/Inter-Italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/Inter-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/Inter-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/Inter-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Söhne — humanist sans (provided as TestSohne trial — replace before production) */
@font-face {
  font-family: "Söhne";
  src: url("../fonts/Sohne-Buch.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Söhne";
  src: url("../fonts/Sohne-Kraftig.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Söhne";
  src: url("../fonts/Sohne-Halbfett.otf") format("opentype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Söhne";
  src: url("../fonts/Sohne-Dreiviertelfett.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Söhne Mono — code / monospaced data */
@font-face {
  font-family: "Söhne Mono";
  src: url("../fonts/SohneMono-Buch.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Söhne Mono";
  src: url("../fonts/SohneMono-Kraftig.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* ============================================================
   Tokens
   ============================================================ */

:root {
  /* ----- Brand palette (from paleta de colores) ----- */
  --orb-deep-navy:    #0A1425;
  --orb-deep-blue:    #023661;
  --orb-ember:        #DB5227;
  --orb-graphite:     #3F3A42;
  --orb-cool-gray:    #7B828E;
  --orb-white:        #FFFFFF;

  /* Extended scale — derived for surfaces, borders, hover states */
  --orb-navy-900:     #050B17; /* deeper than deep navy — full-bleed bg */
  --orb-navy-800:     #0A1425; /* = deep navy */
  --orb-navy-700:     #111D33;
  --orb-navy-600:     #1A2742;
  --orb-navy-500:     #233354;
  --orb-blue-600:     #023661;
  --orb-blue-500:     #1A4A75;
  --orb-blue-400:     #3E6E9A;

  --orb-ember-600:    #B83E18; /* press */
  --orb-ember-500:    #DB5227; /* primary */
  --orb-ember-400:    #E66E45; /* hover */
  --orb-ember-100:    #FCE4DA;

  --orb-gray-900:     #1F2530;
  --orb-gray-800:     #3F3A42; /* = graphite */
  --orb-gray-600:     #5C6470;
  --orb-gray-500:     #7B828E; /* = cool gray */
  --orb-gray-400:     #A4A9B3;
  --orb-gray-300:     #C9CDD3;
  --orb-gray-200:     #E2E4E8;
  --orb-gray-100:     #EFF1F3;
  --orb-gray-50:      #F7F8FA;
  --orb-white:        #FFFFFF;

  /* ----- Semantic colors (light mode default) ----- */
  --fg-1:             var(--orb-deep-navy);     /* primary text */
  --fg-2:             var(--orb-graphite);      /* secondary text */
  --fg-3:             var(--orb-cool-gray);     /* tertiary / captions */
  --fg-on-dark:       var(--orb-white);
  --fg-on-accent:     var(--orb-white);

  --bg-1:             var(--orb-white);         /* base canvas */
  --bg-2:             var(--orb-gray-50);       /* subtle panel */
  --bg-3:             var(--orb-gray-100);      /* deeper panel */
  --bg-inverse:       var(--orb-deep-navy);     /* dark surfaces, hero bands */
  --bg-inverse-2:     var(--orb-navy-700);      /* dark surface card */

  --accent:           var(--orb-ember);         /* the orange orbit dot */
  --accent-hover:     var(--orb-ember-400);
  --accent-press:     var(--orb-ember-600);
  --accent-soft:      var(--orb-ember-100);

  --link:             var(--orb-deep-navy);
  --link-hover:       var(--orb-ember);

  --border-1:         var(--orb-gray-200);      /* default hairline */
  --border-2:         var(--orb-gray-300);      /* heavier */
  --border-on-dark:   rgba(255, 255, 255, 0.10);
  --border-strong:    var(--orb-deep-navy);

  /* Status (positive/negative) — derived sparingly, not in the core palette */
  --success:          #1F8A5B;
  --warning:          #C58A1A;
  --danger:           #B83E18;

  /* ----- Typography families ----- */
  --font-display:     "Aktiv Grotesk", "Inter", system-ui, sans-serif;
  --font-body:        "Inter", "Aktiv Grotesk", system-ui, sans-serif;
  --font-humanist:    "Söhne", "Inter", system-ui, sans-serif;
  --font-mono:        "Söhne Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* ----- Type scale (1rem = 16px) ----- */
  --fs-display-xl:    72px;   /* 1920 hero */
  --fs-display-lg:    56px;
  --fs-display-md:    44px;
  --fs-h1:            36px;
  --fs-h2:            28px;
  --fs-h3:            22px;
  --fs-h4:            18px;
  --fs-body:          16px;
  --fs-body-sm:       14px;
  --fs-caption:       12px;
  --fs-eyebrow:       11px;   /* tracked + uppercased */

  --lh-tight:         1.05;
  --lh-snug:          1.18;
  --lh-base:          1.5;
  --lh-loose:         1.6;

  --ls-display:       -0.02em;
  --ls-tight:         -0.01em;
  --ls-base:          0;
  --ls-eyebrow:       0.16em;   /* the brand's spaced-out wordmark feel */

  /* ----- Radii ----- */
  --r-sm:             4px;
  --r-md:             8px;
  --r-lg:             14px;
  --r-xl:             20px;
  --r-pill:           999px;

  /* ----- Spacing scale ----- */
  --sp-0:             0;
  --sp-1:             4px;
  --sp-2:             8px;
  --sp-3:             12px;
  --sp-4:             16px;
  --sp-5:             24px;
  --sp-6:             32px;
  --sp-7:             48px;
  --sp-8:             64px;
  --sp-9:             96px;
  --sp-10:            128px;

  /* ----- Elevation / shadows ----- */
  --shadow-1:         0 1px 2px rgba(10, 20, 37, 0.06);
  --shadow-2:         0 2px 8px rgba(10, 20, 37, 0.08), 0 1px 2px rgba(10, 20, 37, 0.04);
  --shadow-3:         0 12px 32px rgba(10, 20, 37, 0.12), 0 2px 4px rgba(10, 20, 37, 0.04);
  --shadow-4:         0 28px 64px rgba(10, 20, 37, 0.18), 0 4px 8px rgba(10, 20, 37, 0.06);
  --shadow-inset:     inset 0 0 0 1px var(--border-1);
  --shadow-focus:     0 0 0 3px rgba(219, 82, 39, 0.32);

  /* Motion */
  --ease-out:         cubic-bezier(0.22, 1, 0.36, 1);
  --ease-inout:       cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:         140ms;
  --dur-base:         220ms;
  --dur-slow:         400ms;
}

/* Dark surface variant — apply to any block that should switch */
.orb-dark {
  --fg-1: var(--orb-white);
  --fg-2: rgba(255, 255, 255, 0.78);
  --fg-3: rgba(255, 255, 255, 0.56);
  --bg-1: var(--orb-deep-navy);
  --bg-2: var(--orb-navy-700);
  --bg-3: var(--orb-navy-600);
  --border-1: var(--border-on-dark);
  --border-2: rgba(255, 255, 255, 0.18);
}

/* ============================================================
   Semantic primitives — drop-in
   ============================================================ */

body, .orb-body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-base);
  color: var(--fg-1);
  background: var(--bg-1);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.orb-eyebrow {
  font-family: var(--font-display);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
  color: var(--fg-2);
}
.orb-eyebrow--accent { color: var(--accent); }

.orb-display-xl, h1.orb-display {
  font-family: var(--font-display);
  font-size: var(--fs-display-xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  font-weight: 700;
  color: var(--fg-1);
  text-wrap: balance;
}
.orb-display-lg {
  font-family: var(--font-display);
  font-size: var(--fs-display-lg);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  font-weight: 700;
}
.orb-display-md {
  font-family: var(--font-display);
  font-size: var(--fs-display-md);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  font-weight: 700;
}

h1, .orb-h1 {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  font-weight: 700;
  color: var(--fg-1);
}
h2, .orb-h2 {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  font-weight: 600;
  color: var(--fg-1);
}
h3, .orb-h3 {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  line-height: 1.3;
  font-weight: 600;
  color: var(--fg-1);
}
h4, .orb-h4 {
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  line-height: 1.35;
  font-weight: 600;
  color: var(--fg-1);
}

p, .orb-p {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-loose);
  color: var(--fg-2);
  text-wrap: pretty;
}
.orb-p--lead {
  font-size: 18px;
  color: var(--fg-1);
}
.orb-p--sm {
  font-size: var(--fs-body-sm);
}
.orb-caption {
  font-size: var(--fs-caption);
  color: var(--fg-3);
  letter-spacing: 0.02em;
}

.orb-mono, code {
  font-family: var(--font-mono);
  font-size: 0.92em;
}

a, .orb-link {
  color: var(--link);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  transition: color var(--dur-fast) var(--ease-out);
}
a:hover, .orb-link:hover { color: var(--link-hover); }

/* Selection */
::selection { background: var(--accent); color: var(--orb-white); }