/* 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 Latin (bold) */
@font-face {
    font-family: 'Orbitron';
    src: url('../fonts/orbitron-v35-latin-700.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: fallback;
  }
  
  /* Local brand font — Manrope Latin (regular + bold) */
  @font-face {
    font-family: 'Manrope';
    src: url('../fonts/manrope-v20-latin-regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: fallback;
  }
  
  @font-face {
    font-family: 'Manrope';
    src: url('../fonts/manrope-v20-latin-700.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: fallback;
  }
  
  :root {
    /* --------------------------------------------------------
       BRAND COLORS
    -------------------------------------------------------- */
    --color-primary:           #00d1b2;   /* Teal — primary brand */
    --color-secondary:         #FF6B35;   /* Orange — secondary accent */
  
    /* Teal scale */
    --color-primary-50:        #e8faf7;
    --color-primary-100:       #c5f2eb;
    --color-primary-200:       #8ae5d7;
    --color-primary-300:       #4dd8c3;
    --color-primary-400:       #1dcbb0;
    --color-primary-500:       #00d1b2;   /* = --color-logo */
    --color-primary-600:       #00b89c;
    --color-primary-700:       #009c84;
    --color-primary-800:       #007f6b;
    --color-primary-900:       #005f50;
  
    /* Orange scale */
    --color-secondary-50:      #fff3ef;
    --color-secondary-100:     #ffe0d4;
    --color-secondary-200:     #ffbfa8;
    --color-secondary-300:     #ff9d7a;
    --color-secondary-400:     #ff7c4d;
    --color-secondary-500:     #FF6B35;   /* = --color-secondary */
    --color-secondary-600:     #e85a24;
    --color-secondary-700:     #c94916;
    --color-secondary-800:     #a03610;
    --color-secondary-900:     #782508;
  
    /* --------------------------------------------------------
       BACKGROUNDS & SURFACES
    -------------------------------------------------------- */
    --color-bg:             #ffffff;
    --color-surface:        #f5f5f5;
    --color-surface-primary:   #e8faf7;
    --color-surface-secondary: #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-primary:   #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-primary:    rgba(0, 209, 178, 0.40);
    --color-border-secondary:  rgba(255, 107, 53, 0.40);
    --color-glow-primary:      rgba(0, 209, 178, 0.22);
    --color-glow-secondary:    rgba(255, 107, 53, 0.20);
  
    /* Semantic border aliases */
    --border-default:       1px solid var(--color-border);
    --border-primary:          1px solid var(--color-border-primary);
    --border-secondary:        1px solid var(--color-border-secondary);
  
    /* --------------------------------------------------------
       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 — two tiers (regular + bold); only 400 & 700 need font files */
    --weight-regular:       400;
    --weight-bold:          700;
  
    /* 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-bold);
    --h3-tracking:          var(--tracking-normal);
    --h3-leading:           var(--leading-snug);
  
    --h4-font:              var(--font-body);
    --h4-size:              var(--text-md);
    --h4-weight:            var(--weight-regular);
    --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-bold);
    --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-primary:  0 4px 16px var(--color-glow-primary);
    --shadow-secondary:0 4px 16px var(--color-glow-secondary);
  
    /* --------------------------------------------------------
       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);
  }