/* ===========================================================================
   freddie spirit — colors_and_type.css
   The single source of truth. Load this once; everything reads from these vars.

   Aesthetic: glassy & clean — the vibrancy of macOS / iOS materials, built to
   work on the web. Translucent surfaces, soft diffuse shadows, continuous-feel
   corners, cool neutral grays, one vivid signature blue, and colorful backdrops
   that let the glass do its work.
   ===========================================================================*/

/* JetBrains Mono via CDN (no mono font supplied). Inter is self-hosted below. */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&display=swap');

/* ——— Brand font: Inter (uploaded, self-hosted, variable) ——— */
@font-face {
  font-family: 'Inter';
  src: url('fonts/Inter-VariableFont_opsz_wght.ttf') format('truetype');
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('fonts/Inter-Italic-VariableFont_opsz_wght.ttf') format('truetype');
  font-weight: 100 900; font-style: italic; font-display: swap;
}

:root {
  /* ——— Type stacks ———
     Inter is the brand font (uploaded, self-hosted). It is intentionally close to
     San Francisco, so the system stays cohesive next to native Apple UI; the
     platform fonts follow only as a fallback. */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Text',
               system-ui, 'Segoe UI', sans-serif;
  --font-mono: ui-monospace, 'SF Mono', 'JetBrains Mono', 'Menlo', 'Consolas', monospace;

  /* ===== COLOR ============================================================ */

  /* Neutrals — cool, Apple-gray. Labels follow the iOS opacity ladder. */
  --ink:        #1D1D1F;   /* primary label / near-black */
  --fg1:        #1D1D1F;
  --fg2:        #56565C;   /* secondary label */
  --fg3:        #8A8A90;   /* tertiary label / captions */
  --fg4:        #B0B0B6;   /* quaternary / disabled */
  --on-accent:  #FFFFFF;

  /* Surfaces */
  --bg:           #EEF0F4;   /* system grouped background — cool light gray */
  --bg-2:         #F6F7F9;   /* secondary grouped background */
  --surface:      #FFFFFF;   /* opaque elevated card */
  --surface-sunk: #E7E9EF;   /* recessed wells */

  /* Signature — "spirit" blue. One vivid accent does the interactive work. */
  --accent:        #1F6BFF;
  --accent-hover:  #195CE0;
  --accent-press:  #1450C7;
  --accent-soft:   #E8F0FF;   /* tinted fill behind accent text/icons */
  --accent-2:      #6A5CFF;   /* indigo — only as the far stop of the spirit gradient */

  /* System palette — original, harmonious, used for status & category accents */
  --green:   #2FBF71;
  --red:     #FB4D3D;
  --orange:  #FF9F2E;
  --yellow:  #FFC53D;
  --pink:    #FF5C93;
  --purple:  #9D5CFF;
  --teal:    #18C2BE;
  --cyan:    #2DB7F5;

  /* Separators / hairlines — translucent gray, layer over anything */
  --separator:      rgba(60, 60, 67, 0.13);
  --separator-soft: rgba(60, 60, 67, 0.07);
  --separator-strong: rgba(60, 60, 67, 0.22);

  /* System fills — translucent grays that power controls (search, segments,
     toggle tracks, chips). Use over light surfaces. */
  --fill-1: rgba(118, 118, 128, 0.20);
  --fill-2: rgba(118, 118, 128, 0.14);
  --fill-3: rgba(118, 118, 128, 0.10);
  --fill-4: rgba(118, 118, 128, 0.06);

  /* ===== GLASS / MATERIALS ================================================ */
  /* The signature surface. Blur + saturate makes color bleed through the
     frosted pane; the inset top highlight + hairline rim reads as a real edge.
     Always place glass over colorful or layered content — never flat gray. */
  --glass-blur-sm:  14px;
  --glass-blur:     24px;
  --glass-blur-lg:  40px;
  --glass-sat:      180%;

  --glass-thin:     rgba(255, 255, 255, 0.45);
  --glass-regular:  rgba(255, 255, 255, 0.62);
  --glass-thick:    rgba(255, 255, 255, 0.78);
  --glass-chrome:   rgba(248, 249, 252, 0.72);  /* nav bars / toolbars */

  --glass-rim:      rgba(255, 255, 255, 0.55);   /* 1px outer border */
  --glass-highlight: rgba(255, 255, 255, 0.65);  /* inset top edge */
  --glass-shadow:   0 1px 1px rgba(255,255,255,0.45) inset,
                    0 10px 34px rgba(17, 24, 39, 0.14);

  /* Dark glass — for HUDs / context menus over bright content */
  --glass-dark:     rgba(28, 28, 30, 0.62);
  --glass-dark-rim: rgba(255, 255, 255, 0.10);

  /* Scrim behind sheets / modals */
  --scrim: rgba(17, 24, 39, 0.28);

  /* Signature "spirit" mesh — the brand gradient. Vivid Apple-wallpaper energy,
     not a flat SaaS purple. Use as a hero/lockscreen backdrop for glass. */
  --spirit-gradient:
     radial-gradient(120% 120% at 12% 8%,  #4D8BFF 0%, rgba(77,139,255,0) 46%),
     radial-gradient(120% 120% at 92% 18%, #8A6BFF 0%, rgba(138,107,255,0) 50%),
     radial-gradient(140% 130% at 78% 96%, #FF5FA2 0%, rgba(255,95,162,0) 52%),
     radial-gradient(120% 120% at 18% 92%, #18C2BE 0%, rgba(24,194,190,0) 50%),
     linear-gradient(135deg, #2E7BFF 0%, #6A5CFF 100%);

  /* ===== TYPE SCALE ======================================================= */
  --fs-display-xl: 5rem;      /* 80 */
  --fs-display:    3.5rem;    /* 56 */
  --fs-title-1:    2.5rem;    /* 40 */
  --fs-title-2:    2rem;      /* 32 */
  --fs-title-3:    1.5rem;    /* 24 */
  --fs-headline:   1.0625rem; /* 17 — emphasised body */
  --fs-body:       1.0625rem; /* 17 — iOS body */
  --fs-callout:    1rem;      /* 16 */
  --fs-subhead:    0.9375rem; /* 15 */
  --fs-footnote:   0.8125rem; /* 13 */
  --fs-caption:    0.75rem;   /* 12 */

  --lh-tight:  1.06;
  --lh-snug:   1.2;
  --lh-body:   1.5;

  --tr-display: -0.03em;
  --tr-title:   -0.02em;
  --tr-tight:   -0.01em;
  --tr-wide:     0.02em;
  --tr-label:    0.06em;

  /* ===== SPACING (4-based) ================================================ */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-24: 96px;

  /* ===== RADII — generous, continuous-feel ================================ */
  --r-xs:   6px;
  --r-sm:   10px;
  --r-md:   14px;
  --r-lg:   20px;
  --r-xl:   28px;
  --r-2xl:  38px;   /* sheets */
  --r-pill: 999px;

  /* ===== ELEVATION — soft, diffuse, never harsh ========================== */
  --shadow-sm:  0 1px 2px rgba(17,24,39,0.06), 0 1px 3px rgba(17,24,39,0.08);
  --shadow-md:  0 2px 6px rgba(17,24,39,0.06), 0 6px 16px rgba(17,24,39,0.09);
  --shadow-lg:  0 4px 10px rgba(17,24,39,0.06), 0 16px 40px rgba(17,24,39,0.13);
  --shadow-xl:  0 8px 16px rgba(17,24,39,0.08), 0 30px 64px rgba(17,24,39,0.18);
  --shadow-accent: 0 6px 20px rgba(31, 107, 255, 0.35);

  /* ===== MOTION — gentle ease-out; spring only on press ================== */
  --dur-fast:  150ms;
  --dur-base:  260ms;
  --dur-slow:  420ms;
  --ease-out:      cubic-bezier(0.22, 1, 0.36, 1);
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring:   cubic-bezier(0.34, 1.4, 0.5, 1);
}

/* ——— Baseline ———————————————————————————————————————————————— */
html, body {
  margin: 0;
  background: var(--bg);
  color: var(--fg1);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ——— Semantic type classes —————————————————————————————————————— */
.display-xl {
  font-size: var(--fs-display-xl); font-weight: 800;
  letter-spacing: var(--tr-display); line-height: var(--lh-tight); color: var(--fg1);
}
.display {
  font-size: var(--fs-display); font-weight: 800;
  letter-spacing: var(--tr-display); line-height: var(--lh-tight); color: var(--fg1);
}
h1, .title-1 {
  font-size: var(--fs-title-1); font-weight: 700;
  letter-spacing: var(--tr-title); line-height: var(--lh-snug); color: var(--fg1); margin: 0;
}
h2, .title-2 {
  font-size: var(--fs-title-2); font-weight: 700;
  letter-spacing: var(--tr-title); line-height: var(--lh-snug); color: var(--fg1); margin: 0;
}
h3, .title-3 {
  font-size: var(--fs-title-3); font-weight: 600;
  letter-spacing: var(--tr-tight); line-height: var(--lh-snug); color: var(--fg1); margin: 0;
}
.headline {
  font-size: var(--fs-headline); font-weight: 600;
  letter-spacing: var(--tr-tight); line-height: 1.35; color: var(--fg1);
}
p, .body {
  font-size: var(--fs-body); font-weight: 400;
  line-height: var(--lh-body); color: var(--fg1);
}
.callout { font-size: var(--fs-callout); font-weight: 400; line-height: 1.45; color: var(--fg1); }
.subhead { font-size: var(--fs-subhead); font-weight: 400; line-height: 1.4; color: var(--fg2); }
.footnote { font-size: var(--fs-footnote); font-weight: 400; line-height: 1.4; color: var(--fg3); }
.caption  { font-size: var(--fs-caption);  font-weight: 400; line-height: 1.35; color: var(--fg3); }

.muted { color: var(--fg2); }
.dim   { color: var(--fg3); }

/* Mono — labels, metrics, code. Optional uppercase eyebrow via .eyebrow */
.mono, code, kbd {
  font-family: var(--font-mono); font-size: var(--fs-footnote);
  letter-spacing: 0; color: var(--fg2);
}
.eyebrow {
  font-family: var(--font-mono); font-size: var(--fs-caption); font-weight: 500;
  letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--fg3);
}

.accent { color: var(--accent); }

/* ——— Glass utility classes ——————————————————————————————————————— */
.glass {
  background: var(--glass-regular);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  border: 1px solid var(--glass-rim);
  box-shadow: var(--glass-shadow);
}
.glass-thin    { background: var(--glass-thin); }
.glass-thick   { background: var(--glass-thick); }
.glass-chrome  { background: var(--glass-chrome); }
.glass-dark {
  background: var(--glass-dark);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  border: 1px solid var(--glass-dark-rim);
  color: #fff;
}

::selection { background: var(--accent-soft); color: var(--accent-press); }

:focus-visible {
  outline: 3px solid color-mix(in oklab, var(--accent) 45%, transparent);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}