/* Spine Tech — canonical published tokens + @font-face. Source-of-truth: FRONTEND/public/… (assembled to WEBSITE/ roots by .scripts/assemble-website.sh). */

/* Local brand font — Orbitron Variable */
@font-face {
  font-family: 'Orbitron';
  src: url('/fonts/Orbitron-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* Local brand font — Manrope Variable */
@font-face {
  font-family: 'Manrope';
  src: url('/fonts/Manrope-VariableFont_wght.ttf') format('truetype');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

:root {
  /* --------------------------------------------------------
     BRAND COLORS
  -------------------------------------------------------- */
  --color-logo:           #00d1b2;   /* Teal — primary brand */
  --color-orange:         #FF6B35;   /* Orange — secondary accent */

  /* Teal scale */
  --color-teal-50:        #e8faf7;
  --color-teal-100:       #c5f2eb;
  --color-teal-200:       #8ae5d7;
  --color-teal-300:       #4dd8c3;
  --color-teal-400:       #1dcbb0;
  --color-teal-500:       #00d1b2;   /* = --color-logo */
  --color-teal-600:       #00b89c;
  --color-teal-700:       #009c84;
  --color-teal-800:       #007f6b;
  --color-teal-900:       #005f50;

  /* Orange scale */
  --color-orange-50:      #fff3ef;
  --color-orange-100:     #ffe0d4;
  --color-orange-200:     #ffbfa8;
  --color-orange-300:     #ff9d7a;
  --color-orange-400:     #ff7c4d;
  --color-orange-500:     #FF6B35;   /* = --color-orange */
  --color-orange-600:     #e85a24;
  --color-orange-700:     #c94916;
  --color-orange-800:     #a03610;
  --color-orange-900:     #782508;

  /* --------------------------------------------------------
     BACKGROUNDS & SURFACES
  -------------------------------------------------------- */
  --color-bg:             #ffffff;
  --color-surface:        #f5f5f5;
  --color-surface-teal:   #e8faf7;
  --color-surface-orange: #fff3ef;
  --color-footer-bg:      #e8faf7;

  /* --------------------------------------------------------
     TEXT
  -------------------------------------------------------- */
  --color-text:           #0d1f3c;   /* Primary — deep navy */
  --color-text-muted:     #555555;   /* Secondary */
  --color-text-light:     #888888;   /* Tertiary / placeholder */
  --color-text-on-teal:   #1f2937;   /* On teal surfaces */
  --color-text-on-dark:   #f0f0f0;   /* On dark backgrounds */

  /* Semantic text aliases */
  --fg1:                  var(--color-text);
  --fg2:                  var(--color-text-muted);
  --fg3:                  var(--color-text-light);

  /* --------------------------------------------------------
     BORDERS & GLOWS
  -------------------------------------------------------- */
  --color-border:         rgba(0, 0, 0, 0.08);
  --color-border-teal:    rgba(0, 209, 178, 0.40);
  --color-border-orange:  rgba(255, 107, 53, 0.40);
  --color-glow-teal:      rgba(0, 209, 178, 0.22);
  --color-glow-orange:    rgba(255, 107, 53, 0.20);

  /* Semantic border aliases */
  --border-default:       1px solid var(--color-border);
  --border-teal:          1px solid var(--color-border-teal);
  --border-orange:        1px solid var(--color-border-orange);

  /* --------------------------------------------------------
     TYPOGRAPHY
  -------------------------------------------------------- */

  /* Font families */
  --font-logo:            'Orbitron', eurostile-extended, sans-serif;
  --font-heading:         var(--font-logo);
  --font-body:            'Manrope', 'Segoe UI', Roboto, Arial, sans-serif;
  --font-mono:            'JetBrains Mono', 'Fira Code', 'Consolas', monospace;

  /* Font sizes */
  --text-xs:              0.75rem;    /* 12px */
  --text-sm:              0.8125rem;  /* 13px */
  --text-base:            0.875rem;   /* 14px */
  --text-md:              1rem;       /* 16px */
  --text-lg:              1.125rem;   /* 18px */
  --text-xl:              1.25rem;    /* 20px */
  --text-2xl:             1.5rem;     /* 24px */
  --text-3xl:             1.875rem;   /* 30px */
  --text-4xl:             2.25rem;    /* 36px */
  --text-5xl:             3rem;       /* 48px */

  /* Font weights */
  --weight-regular:       400;
  --weight-medium:        500;
  --weight-semibold:      600;
  --weight-bold:          700;
  --weight-extrabold:     800;

  /* Line heights */
  --leading-tight:        1.2;
  --leading-snug:         1.35;
  --leading-normal:       1.5;
  --leading-relaxed:      1.65;

  /* Letter spacing */
  --tracking-tight:       -0.02em;
  --tracking-normal:      0;
  --tracking-wide:        0.04em;
  --tracking-wider:       0.08em;
  --tracking-widest:      0.12em;

  /* --------------------------------------------------------
     SEMANTIC TYPE ROLES
  -------------------------------------------------------- */
  --h1-font:              var(--font-heading);
  --h1-size:              var(--text-3xl);
  --h1-weight:            var(--weight-bold);
  --h1-tracking:          var(--tracking-wide);
  --h1-leading:           var(--leading-tight);

  --h2-font:              var(--font-heading);
  --h2-size:              var(--text-2xl);
  --h2-weight:            var(--weight-bold);
  --h2-tracking:          var(--tracking-wide);
  --h2-leading:           var(--leading-tight);

  --h3-font:              var(--font-body);
  --h3-size:              var(--text-lg);
  --h3-weight:            var(--weight-semibold);
  --h3-tracking:          var(--tracking-normal);
  --h3-leading:           var(--leading-snug);

  --h4-font:              var(--font-body);
  --h4-size:              var(--text-md);
  --h4-weight:            var(--weight-semibold);
  --h4-tracking:          var(--tracking-normal);
  --h4-leading:           var(--leading-snug);

  --body-font:            var(--font-body);
  --body-size:            var(--text-base);
  --body-weight:          var(--weight-regular);
  --body-leading:         var(--leading-normal);

  --label-font:           var(--font-body);
  --label-size:           var(--text-sm);
  --label-weight:         var(--weight-medium);
  --label-tracking:       var(--tracking-wide);

  --caption-font:         var(--font-body);
  --caption-size:         var(--text-xs);
  --caption-weight:       var(--weight-regular);
  --caption-leading:      var(--leading-normal);

  /* --------------------------------------------------------
     SPACING
  -------------------------------------------------------- */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-16:  64px;
  --space-20:  80px;
  --space-24:  96px;

  /* --------------------------------------------------------
     BORDER RADIUS
  -------------------------------------------------------- */
  --radius-sm:    4px;
  --radius-md:    6px;
  --radius-lg:    8px;
  --radius-xl:    12px;
  --radius-2xl:   16px;
  --radius-full:  9999px;

  /* --------------------------------------------------------
     SHADOWS / ELEVATION
  -------------------------------------------------------- */
  --shadow-xs:    0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-sm:    0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md:    0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.04);
  --shadow-lg:    0 10px 15px rgba(0, 0, 0, 0.08), 0 4px 6px rgba(0, 0, 0, 0.05);
  --shadow-teal:  0 4px 16px var(--color-glow-teal);
  --shadow-orange:0 4px 16px var(--color-glow-orange);

  /* --------------------------------------------------------
     TRANSITIONS
  -------------------------------------------------------- */
  --transition-fast:   150ms ease;
  --transition-base:   200ms ease;
  --transition-slow:   300ms ease;
}

/* --------------------------------------------------------
   BASE ELEMENT STYLES
-------------------------------------------------------- */
body {
  font-family: var(--font-body);
  font-size: var(--body-size);
  font-weight: var(--body-weight);
  line-height: var(--body-leading);
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
}

h1 {
  font-family: var(--h1-font);
  font-size: var(--h1-size);
  font-weight: var(--h1-weight);
  letter-spacing: var(--h1-tracking);
  line-height: var(--h1-leading);
  color: var(--color-text);
  text-transform: uppercase;
}

h2 {
  font-family: var(--h2-font);
  font-size: var(--h2-size);
  font-weight: var(--h2-weight);
  letter-spacing: var(--h2-tracking);
  line-height: var(--h2-leading);
  color: var(--color-text);
  text-transform: uppercase;
}

h3 {
  font-family: var(--h3-font);
  font-size: var(--h3-size);
  font-weight: var(--h3-weight);
  line-height: var(--h3-leading);
  color: var(--color-text);
}

h4 {
  font-family: var(--h4-font);
  font-size: var(--h4-size);
  font-weight: var(--h4-weight);
  line-height: var(--h4-leading);
  color: var(--color-text);
}

p {
  font-family: var(--body-font);
  font-size: var(--body-size);
  line-height: var(--body-leading);
  color: var(--color-text);
}

small, .caption {
  font-family: var(--caption-font);
  font-size: var(--caption-size);
  color: var(--fg3);
}

label, .label {
  font-family: var(--label-font);
  font-size: var(--label-size);
  font-weight: var(--label-weight);
  letter-spacing: var(--label-tracking);
}

code, pre {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
}