/* ============================================================
   GODDY TABI — DESIGN TOKENS
   Single source of truth for all visual values
   ============================================================ */

:root {
  /* Brand */
  --navy:         #1B2D5E;
  --navy-deep:    #0F1E42;
  --navy-mid:     #243875;
  --gold:         #D4A017;
  --gold-light:   #F0C040;
  --gold-pale:    rgba(212,160,23,0.12);

  /* Neutrals */
  --bg:           #F4F6FB;
  --surface:      #FFFFFF;
  --border:       #E8ECF4;
  --border-light: #F0F2F8;
  --text-primary: #0F1E42;
  --text-secondary:#5A6485;
  --text-muted:   #9AA0B8;

  /* Status */
  --green:        #16A34A;
  --green-bg:     #F0FDF4;
  --red:          #DC2626;
  --red-bg:       #FEF2F2;
  --amber:        #D97706;
  --amber-bg:     #FFFBEB;
  --blue:         #2563EB;
  --blue-bg:      #EFF6FF;

  /* Typography */
  --font:         'Inter', system-ui, -apple-system, sans-serif;
  --font-display: 'Inter', system-ui, sans-serif;

  /* Scale */
  --text-xs:    11px;
  --text-sm:    13px;
  --text-base:  15px;
  --text-md:    17px;
  --text-lg:    20px;
  --text-xl:    24px;
  --text-2xl:   30px;
  --text-3xl:   40px;

  /* Weight */
  --regular:  400;
  --medium:   500;
  --semibold: 600;
  --bold:     700;
  --black:    900;

  /* Spacing */
  --s1:  4px;  --s2:  8px;  --s3: 12px;
  --s4: 16px;  --s5: 20px;  --s6: 24px;
  --s8: 32px;  --s10:40px;  --s12:48px;

  /* Radius */
  --r-sm:   8px;
  --r-md:   12px;
  --r-lg:   16px;
  --r-xl:   20px;
  --r-2xl:  24px;
  --r-full: 9999px;

  /* Shadows */
  --shadow-xs: 0 1px 2px rgba(15,30,66,0.06);
  --shadow-sm: 0 2px 8px rgba(15,30,66,0.08);
  --shadow-md: 0 4px 16px rgba(15,30,66,0.10);
  --shadow-lg: 0 8px 32px rgba(15,30,66,0.14);
  --shadow-xl: 0 20px 60px rgba(15,30,66,0.18);

  /* Sidebar */
  --sidebar-w:        240px;
  --sidebar-w-sm:     68px;
  --sidebar-w-tablet: 76px;
  /* Includes the iOS status-bar safe area so the topbar naturally grows
     tall enough to clear the notch/Dynamic Island when installed as a
     standalone PWA (apple-mobile-web-app-status-bar-style is
     "black-translucent", which deliberately draws app content full-bleed
     under the status bar for the immersive look — this is what keeps
     that content from landing invisibly behind it). env() resolves to 0
     on every device without an inset, so this is visually identical to
     the old fixed 60px everywhere else — Android, desktop, non-notch
     iPhones. .topbar (css/layout.css) pairs this with
     align-items:flex-end so real content still sits in exactly the
     bottom 60px, with any inset as pure top spacing. */
  --header-h:         calc(60px + env(safe-area-inset-top));

  /* Floating mobile bottom-nav dock — real measured height, read by
     other fixed elements (e.g. .roster-submitbar) that need to float
     just above it without hardcoding the number themselves. */
  --bottom-nav-h:     62px;

  /* Transitions */
  --fast:   150ms ease;
  --base:   250ms ease;
  --slow:   400ms ease;
  --spring: 400ms cubic-bezier(0.34,1.56,0.64,1);
}