/* ============================================================
   Flash Order — Colors & Type
   Tokens derived from FlashOrder 2.0 Style Guide
   ============================================================ */

/* Self-hosted fonts. Paths are relative to this CSS file (project root). */

/* General Sans — body + UI */
@font-face{font-family:"General Sans";font-weight:200;font-style:normal;font-display:swap;src:url("assets/fonts/GeneralSans-Extralight.otf") format("opentype");}
@font-face{font-family:"General Sans";font-weight:200;font-style:italic;font-display:swap;src:url("assets/fonts/GeneralSans-ExtralightItalic.otf") format("opentype");}
@font-face{font-family:"General Sans";font-weight:300;font-style:normal;font-display:swap;src:url("assets/fonts/GeneralSans-Light.otf") format("opentype");}
@font-face{font-family:"General Sans";font-weight:300;font-style:italic;font-display:swap;src:url("assets/fonts/GeneralSans-LightItalic.otf") format("opentype");}
@font-face{font-family:"General Sans";font-weight:400;font-style:normal;font-display:swap;src:url("assets/fonts/GeneralSans-Regular.otf") format("opentype");}
@font-face{font-family:"General Sans";font-weight:400;font-style:italic;font-display:swap;src:url("assets/fonts/GeneralSans-Italic.otf") format("opentype");}
@font-face{font-family:"General Sans";font-weight:500;font-style:normal;font-display:swap;src:url("assets/fonts/GeneralSans-Medium.otf") format("opentype");}
@font-face{font-family:"General Sans";font-weight:500;font-style:italic;font-display:swap;src:url("assets/fonts/GeneralSans-MediumItalic.otf") format("opentype");}
@font-face{font-family:"General Sans";font-weight:600;font-style:normal;font-display:swap;src:url("assets/fonts/GeneralSans-Semibold.otf") format("opentype");}
@font-face{font-family:"General Sans";font-weight:600;font-style:italic;font-display:swap;src:url("assets/fonts/GeneralSans-SemiboldItalic.otf") format("opentype");}
@font-face{font-family:"General Sans";font-weight:700;font-style:normal;font-display:swap;src:url("assets/fonts/GeneralSans-Bold.otf") format("opentype");}
@font-face{font-family:"General Sans";font-weight:700;font-style:italic;font-display:swap;src:url("assets/fonts/GeneralSans-BoldItalic.otf") format("opentype");}

/* Fraunces — display / editorial. Variable font, weights 100–900. */
@font-face{font-family:"Fraunces";font-weight:100 900;font-style:normal;font-display:swap;src:url("assets/fonts/Fraunces.ttf") format("truetype-variations");}
@font-face{font-family:"Fraunces";font-weight:100 900;font-style:italic;font-display:swap;src:url("assets/fonts/Fraunces-Italic.ttf") format("truetype-variations");}

/* JetBrains Mono — eyebrows, codes, technical labels. Variable. */
@font-face{font-family:"JetBrains Mono";font-weight:100 800;font-style:normal;font-display:swap;src:url("assets/fonts/JetBrainsMono.ttf") format("truetype-variations");}
@font-face{font-family:"JetBrains Mono";font-weight:100 800;font-style:italic;font-display:swap;src:url("assets/fonts/JetBrainsMono-Italic.ttf") format("truetype-variations");}

:root {
  /* --- PRIMARY PALETTE ---------------------------------------- */
  --fo-seasalt:        #FAFAFA; /* Seasalt White — default surface */
  --fo-soft-black:     #252525; /* Soft Black — default ink */

  /* --- PRIMARY ACCENT (use sparingly) ------------------------- */
  --fo-soft-orange:    #F6D9CC; /* tint / illustration highlight */
  --fo-bright-orange:  #E76933; /* the ONE accent. Use sparingly. */

  /* --- SECONDARY NEUTRALS ------------------------------------ */
  --fo-bright-white:   #FFFFFF; /* pure white — highlights only */
  --fo-off-white:      #EDEDED;
  --fo-light-gray:     #E1E2E3;
  --fo-cool-gray:      #5B5B5B;
  --fo-dark-gray:      #404040;
  --fo-deep-black:     #1F1F1F; /* deep black — where needed */

  /* --- SECONDARY ACCENTS (only where absolutely necessary) --- */
  --fo-orange-1:       #F2B79E;
  --fo-orange-2:       #EE9670;
  --fo-green:          #629460;
  --fo-red:            #D1462F;
  --fo-yellow:         #FFA62B;
  --fo-blue:           #00A7E1;

  /* --- SEMANTIC FOREGROUND / BACKGROUND ---------------------- */
  /* Light mode is default — guide says "prioritize white" */
  --fo-bg:             var(--fo-seasalt);
  --fo-bg-elevated:    var(--fo-bright-white);
  --fo-bg-sunken:      var(--fo-off-white);
  --fo-bg-inverse:     var(--fo-soft-black);

  --fo-fg:             var(--fo-soft-black);
  --fo-fg-muted:       var(--fo-cool-gray);
  --fo-fg-subtle:      var(--fo-dark-gray);
  --fo-fg-on-dark:     var(--fo-seasalt);
  --fo-fg-on-accent:   var(--fo-seasalt);

  --fo-border:         var(--fo-light-gray);
  --fo-border-strong:  var(--fo-cool-gray);

  --fo-accent:         var(--fo-bright-orange);
  --fo-accent-soft:    var(--fo-soft-orange);

  /* Status (use shades only where absolutely necessary) */
  --fo-success:        var(--fo-green);
  --fo-danger:         var(--fo-red);
  --fo-warning:        var(--fo-yellow);
  --fo-info:           var(--fo-blue);

  /* --- SPACING SCALE (based on 8pt grid) --------------------- */
  --fo-space-0:  0;
  --fo-space-1:  4px;
  --fo-space-2:  8px;
  --fo-space-3:  12px;
  --fo-space-4:  16px;
  --fo-space-5:  24px;
  --fo-space-6:  32px;
  --fo-space-7:  48px;
  --fo-space-8:  64px;
  --fo-space-9:  96px;

  /* --- RADII (sleek, not too sharp) -------------------------- */
  --fo-radius-xs: 6px;
  --fo-radius-sm: 10px;
  --fo-radius-md: 14px;
  --fo-radius-lg: 20px;
  --fo-radius-xl: 28px;
  --fo-radius-pill: 999px;

  /* --- SHADOWS (light, airy — never heavy) ------------------- */
  --fo-shadow-xs: 0 1px 2px rgba(37, 37, 37, 0.04);
  --fo-shadow-sm: 0 2px 8px rgba(37, 37, 37, 0.06);
  --fo-shadow-md: 0 8px 24px rgba(37, 37, 37, 0.08);
  --fo-shadow-lg: 0 20px 48px rgba(37, 37, 37, 0.10);
  --fo-shadow-inset: inset 0 1px 0 rgba(255,255,255,0.6);

  /* --- MOTION ------------------------------------------------ */
  --fo-ease-out:   cubic-bezier(0.22, 1, 0.36, 1);
  --fo-ease-in:    cubic-bezier(0.64, 0, 0.78, 0);
  --fo-ease-in-out:cubic-bezier(0.65, 0, 0.35, 1);
  --fo-duration-fast: 120ms;
  --fo-duration-base: 200ms;
  --fo-duration-slow: 320ms;

  /* =============================================================
     TYPOGRAPHY — mirrors style-guide hierarchy (Satoshi / Satoshi)
     Scale ratio ≈ 1.2. All px values taken from the guide.
     ============================================================ */
  --fo-font-sans:    "General Sans", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  --fo-font-display: "Fraunces", Georgia, "Times New Roman", serif; /* editorial headlines */
  --fo-font-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* Font weights — Satoshi ships the full 100–900 range */
  --fo-weight-thin:        100;
  --fo-weight-extralight:  200;
  --fo-weight-light:       300;
  --fo-weight-regular:     400;
  --fo-weight-medium:      500;
  --fo-weight-semibold:    600;
  --fo-weight-bold:        700;
  --fo-weight-extrabold:   800;
  --fo-weight-black:       900;

  /* Size scale (from style guide p.13) */
  --fo-size-h1:        47.78px;
  --fo-size-h2:        39.81px;
  --fo-size-h3:        33.18px;
  --fo-size-h4:        27.65px;
  --fo-size-h5:        23.04px;
  --fo-size-h6:        19.20px;
  --fo-size-body:      16.00px;
  --fo-size-button:    13.33px;
  --fo-size-caption:   11.11px;

  /* Line heights — tight for headings, airy for body */
  --fo-leading-tight:  1.12;
  --fo-leading-snug:   1.25;
  --fo-leading-normal: 1.45;
  --fo-leading-relaxed:1.6;

  /* Tracking — Satoshi is allowed extra letter-spacing */
  --fo-tracking-tight:   -0.01em;
  --fo-tracking-normal:  0em;
  --fo-tracking-wide:    0.04em;
  --fo-tracking-wider:   0.08em;
  --fo-tracking-widest:  0.16em;
}

/* ============================================================
   BASE ELEMENTS — apply tokens to native HTML
   ============================================================ */
html, body {
  background: var(--fo-bg);
  color: var(--fo-fg);
  font-family: var(--fo-font-sans);
  font-size: var(--fo-size-body);
  line-height: var(--fo-leading-normal);
  font-weight: var(--fo-weight-regular);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--fo-font-sans);
  color: var(--fo-fg);
  margin: 0 0 0.5em;
  line-height: var(--fo-leading-tight);
  letter-spacing: var(--fo-tracking-tight);
}

h1 { font-size: var(--fo-size-h1); font-weight: var(--fo-weight-bold); }
h2 { font-size: var(--fo-size-h2); font-weight: var(--fo-weight-semibold); }
h3 { font-size: var(--fo-size-h3); font-weight: var(--fo-weight-semibold); }
h4 { font-size: var(--fo-size-h4); font-weight: var(--fo-weight-medium); }
h5 { font-size: var(--fo-size-h5); font-weight: var(--fo-weight-regular); line-height: var(--fo-leading-snug); }
h6 { font-size: var(--fo-size-h6); font-weight: var(--fo-weight-regular); line-height: var(--fo-leading-snug); }

p {
  font-size: var(--fo-size-body);
  line-height: var(--fo-leading-relaxed);
  margin: 0 0 1em;
}

small, .fo-caption {
  font-size: var(--fo-size-caption);
  color: var(--fo-fg-muted);
  letter-spacing: var(--fo-tracking-wide);
}

/* Display — Fraunces editorial. Use for headlines and statements. */
.fo-display {
  font-family: var(--fo-font-display);
  font-weight: var(--fo-weight-bold);
  letter-spacing: var(--fo-tracking-tight);
}

/* Inline Fraunces accent (the `.fr` span used inside headings and body copy).
   Bumped to 1.15em so the x-height optically matches the surrounding
   General Sans — Fraunces has a smaller x-height at the same font-size. */
.fr { font-size: 1.15em; }

/* Buttons / icon labels */
.fo-label, button, .fo-button {
  font-family: var(--fo-font-sans);
  font-size: var(--fo-size-button);
  font-weight: var(--fo-weight-medium);
  letter-spacing: var(--fo-tracking-wide);
}

code, pre, kbd, samp, .fo-mono {
  font-family: var(--fo-font-mono);
}

::selection {
  background: var(--fo-bright-orange);
  color: var(--fo-seasalt);
}