﻿/* ==========================================================================
   SkyTrade Aviation — Design Tokens
   Source of truth: G:\Studio\skytrade_app\lib\theme.dart
   Every value below maps 1:1 to a value in that file. If theme.dart changes,
   update here to match — this file should never drift from the app.
   ========================================================================== */

:root {

  /* ---- Colors: SkyTradeColors class ---- */
  --st-navy:       #0A1628;
  --st-navy-light: #0F2040;
  --st-navy-mid:   #1A3054;
  --st-gold:       #C9A84C;
  --st-gold-light: #E8C96A;

  --st-white:      #FFFFFF;
  --st-white-90:   rgba(255, 255, 255, 0.90); /* white90 = 0xE6FFFFFF */
  --st-white-60:   rgba(255, 255, 255, 0.60); /* white60 = 0x99FFFFFF */
  --st-white-20:   rgba(255, 255, 255, 0.20); /* white20 = 0x33FFFFFF */

  --st-red:        #E53E3E;
  --st-amber:      #D69E2E;
  --st-green:      #38A169;

  --st-arc-gold:   #C9A84C; /* same as --st-gold, kept as separate token to match Dart naming */
  --st-arc-dim:    rgba(201, 168, 76, 0.15); /* arcDim = 0x26C9A84C (0x26/0xFF ~ 0.15) */

  /* ---- Semantic aliases (colorScheme.dark in theme.dart) ---- */
  --st-color-primary:   var(--st-gold);
  --st-color-secondary: var(--st-gold-light);
  --st-color-surface:   var(--st-navy-light);
  --st-color-error:     var(--st-red);
  --st-color-background: var(--st-navy); /* scaffoldBackgroundColor */

  /* ---- Typography: font families ---- */
  --st-font-display: "Cormorant Garamond", Georgia, serif; /* headlines: displayLarge, headlineLarge, headlineMedium */
  --st-font-body:     "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; /* body, labels, buttons, inputs */

  /* ---- Typography: scale (matches TextTheme in theme.dart) ---- */
  --st-text-display-large-size:    48px;
  --st-text-display-large-weight:  700;
  --st-text-display-large-color:   var(--st-white);

  --st-text-headline-large-size:   32px;
  --st-text-headline-large-weight: 700;
  --st-text-headline-large-color:  var(--st-white);

  --st-text-headline-medium-size:   24px;
  --st-text-headline-medium-weight: 600;
  --st-text-headline-medium-color:  var(--st-white);

  --st-text-body-large-size:   16px;
  --st-text-body-large-weight: 400;
  --st-text-body-large-color:  var(--st-white-90);

  --st-text-body-medium-size:   14px;
  --st-text-body-medium-weight: 400;
  --st-text-body-medium-color:  var(--st-white-60);

  --st-text-label-large-size:   14px;
  --st-text-label-large-weight: 700;
  --st-text-label-large-color:  var(--st-white);

  /* ---- Buttons: elevatedButtonTheme ---- */
  --st-button-bg:            var(--st-gold);
  --st-button-fg:            var(--st-navy);
  --st-button-font-size:     14px;
  --st-button-font-weight:   700;
  --st-button-min-height:    52px;
  --st-button-radius:        8px;

  /* ---- Form inputs: inputDecorationTheme ---- */
  --st-input-bg:              var(--st-navy-light);
  --st-input-radius:          8px;
  --st-input-border:          var(--st-navy-mid);
  --st-input-border-focus:    var(--st-gold);
  --st-input-border-focus-width: 1.5px;
  --st-input-label-color:     var(--st-white-60);
  --st-input-hint-color:      var(--st-white-20);

  /* ---- Dividers ---- */
  --st-divider-color: var(--st-navy-mid);

  /* ---- Bottom nav (mobile) - web equivalent: footer nav / mobile menu ---- */
  --st-nav-bg:                var(--st-navy-light);
  --st-nav-item-selected:     var(--st-gold);
  --st-nav-item-unselected:   var(--st-white-60);

  /* ---- Spacing scale (not explicit in theme.dart - inferred from app rhythm) ---- */
  --st-space-xs:  8px;
  --st-space-sm:  12px;
  --st-space-md:  16px;
  --st-space-lg:  24px;
  --st-space-xl:  32px;
  --st-space-2xl: 48px;
  --st-space-3xl: 64px;

  /* ---- Layout ---- */
  --st-radius-card:   12px; /* not in theme.dart - chosen for web (softer, premium feel) */
  --st-radius-button: var(--st-button-radius);
  --st-radius-input:  var(--st-input-radius);
  --st-max-width:     1200px;
}
