/* =========================================================
   FitCheck Design System — Foundations
   colors_and_type.css

   Philosophy:
   - Neutral, photo-deferential. The user and their outfits are
     the hero. Chrome stays out of the way.
   - One warm ink, one warm paper, one confident accent.
   - Editorial serif used SPARINGLY for stylist-voice moments.
   ========================================================= */

/* ---------- Webfonts (loaded from Google Fonts as a substitution) ---------- */
/* Geist Sans   →  primary UI typeface (clean, modern, geometric-humanist)
   Geist Mono   →  numerals / data / sizing labels
   Instrument Serif → editorial display serif, used ONLY for hero moments */
@import url('https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&family=Geist+Mono:wght@400;500&family=Instrument+Serif:ital@0;1&display=swap');

:root {
  /* =========================================================
     COLOR — INK & PAPER
     A warm near-black on a warm off-white. Paper has a faint
     cream cast so it never reads "tech blue-white" on screen.
     ========================================================= */

  /* Paper (backgrounds) */
  --paper-0: #FBFAF7;   /* page background — warm off-white */
  --paper-1: #F5F3EE;   /* subtle surface  — cards, inputs at rest */
  --paper-2: #ECE8E0;   /* hover surface, dividers-as-fills */
  --paper-3: #DDD7CB;   /* pressed / strong surface */

  /* Ink (foreground) */
  --ink-0:   #181714;   /* primary text — warm near-black */
  --ink-1:   #3A3833;   /* secondary text */
  --ink-2:   #6B6760;   /* tertiary / meta */
  --ink-3:   #9C988E;   /* placeholder / disabled */
  --ink-4:   #C4C0B6;   /* hairline borders */

  /* Pure */
  --white:   #FFFFFF;
  --black:   #0A0907;

  /* =========================================================
     COLOR — ACCENT
     A single confident ochre. Earthy, leather-adjacent, warm.
     Used for primary actions, focus rings, key highlights.
     One color does a lot of work — restraint is the brand.
     ========================================================= */
  --accent:        #B8743A;   /* signature ochre */
  --accent-hover:  #A4632F;   /* hover */
  --accent-press:  #8E5527;   /* press */
  --accent-soft:   #F2E4D2;   /* tinted background */
  --accent-ink:    #FBFAF7;   /* text on accent */

  /* =========================================================
     COLOR — SEMANTIC
     Muted, never neon. They sit alongside neutrals comfortably.
     ========================================================= */
  --success:       #4F7A4A;
  --success-soft:  #E4ECDF;
  --warning:       #B88A2E;
  --warning-soft:  #F4ECD6;
  --danger:        #A8453B;
  --danger-soft:   #F2DDD9;
  --info:          #4A6B7A;
  --info-soft:     #DDE7EC;

  /* =========================================================
     TYPOGRAPHY — FAMILIES
     ========================================================= */
  --font-sans:    'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-serif:   'Instrument Serif', 'Iowan Old Style', Georgia, serif;
  --font-mono:    'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* =========================================================
     TYPOGRAPHY — SCALE
     A modular scale tuned for editorial calm. Large headlines
     lean on the serif for personality; everything else is sans.
     ========================================================= */
  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 16px;
  --text-md:   18px;
  --text-lg:   22px;
  --text-xl:   28px;
  --text-2xl:  36px;
  --text-3xl:  48px;
  --text-4xl:  64px;
  --text-5xl:  88px;

  /* Line heights */
  --leading-tight:  1.05;
  --leading-snug:   1.2;
  --leading-normal: 1.45;
  --leading-loose:  1.65;

  /* Letter spacing */
  --tracking-tighter: -0.03em;
  --tracking-tight:   -0.015em;
  --tracking-normal:  0;
  --tracking-wide:    0.04em;
  --tracking-widest:  0.14em;   /* eyebrows / labels — uppercase */

  /* Weights */
  --weight-light:    300;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* =========================================================
     SPACING
     A 4px-based scale. Photo-led layouts breathe; default
     gutters are generous.
     ========================================================= */
  --space-0:   0;
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   24px;
  --space-6:   32px;
  --space-7:   48px;
  --space-8:   64px;
  --space-9:   96px;
  --space-10: 128px;

  /* =========================================================
     RADII
     Mostly soft, never rounded-pill on cards. Photos stay
     rectangular with a hairline radius, like a polaroid edge.
     ========================================================= */
  --radius-none: 0;
  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   20px;
  --radius-pill: 999px;

  /* =========================================================
     BORDERS
     Hairlines. We use color, not weight, to communicate.
     ========================================================= */
  --border-hair:    1px solid var(--ink-4);
  --border-soft:    1px solid var(--paper-2);
  --border-strong:  1px solid var(--ink-2);
  --border-ink:     1px solid var(--ink-0);

  /* =========================================================
     SHADOWS
     Editorial restraint. Almost never used on cards;
     reserved for floating UI (menus, sheets, lifted photos).
     ========================================================= */
  --shadow-xs:  0 1px 2px rgba(24, 23, 20, 0.04);
  --shadow-sm:  0 2px 8px rgba(24, 23, 20, 0.06);
  --shadow-md:  0 8px 24px rgba(24, 23, 20, 0.08);
  --shadow-lg:  0 24px 64px rgba(24, 23, 20, 0.12);
  --shadow-photo: 0 12px 32px rgba(24, 23, 20, 0.10), 0 2px 6px rgba(24, 23, 20, 0.06);

  /* =========================================================
     OVERLAYS
     Reusable opacity variants for overlays, scrims, and
     translucent surfaces. Avoids hardcoded rgba everywhere.
     ========================================================= */
  --overlay-light:  rgba(251, 250, 247, 0.92);   /* paper-0 at 92% — tab bar, sheets */
  --overlay-medium: rgba(251, 250, 247, 0.85);    /* paper-0 at 85% — extraction status */
  --overlay-dark:   rgba(10, 9, 7, 0.55);         /* near-black at 55% — photo captions */
  --overlay-heavy:  rgba(10, 9, 7, 0.6);          /* near-black at 60% — delete buttons */
  --overlay-scrim:  rgba(0, 0, 0, 0.45);          /* modal backdrop */
  --focus-ring:     0 0 0 0.2rem rgba(184, 116, 58, 0.15);  /* accent focus ring */
  --shadow-accent:       0 4px 12px rgba(184, 116, 58, 0.3);   /* accent CTA shadow */
  --shadow-accent-hover: 0 6px 20px rgba(184, 116, 58, 0.4);   /* accent CTA hover */

  /* =========================================================
     MOTION
     Quiet, fast. Easing is "out-quart" by default — confident
     arrival, no bounce. We don't do springy/playful motion.
     ========================================================= */
  --ease-standard:  cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-entrance:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-exit:      cubic-bezier(0.7, 0, 0.84, 0);

  --duration-instant: 80ms;
  --duration-fast:    160ms;
  --duration-base:    240ms;
  --duration-slow:    420ms;

  /* =========================================================
     LAYOUT
     ========================================================= */
  --container-narrow: 640px;
  --container-base:   960px;
  --container-wide:  1240px;
  --container-bleed: 1600px;
}

/* =========================================================
   SEMANTIC TYPE STYLES
   Use these on real elements. They wrap the foundations into
   meaningful roles so designs stay consistent.
   ========================================================= */

/* Editorial display — used for hero moments, big numbers,
   stylist-voice moments. ITALIC by default — that's the brand. */
.t-display {
  font-family: var(--font-serif);
  font-weight: var(--weight-regular);
  font-style: italic;
  font-size: var(--text-5xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tighter);
  color: var(--ink-0);
}

.t-display-sm {
  font-family: var(--font-serif);
  font-weight: var(--weight-regular);
  font-style: italic;
  font-size: var(--text-3xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--ink-0);
}

/* H1–H4 — sans, the workhorse hierarchy */
.t-h1 {
  font-family: var(--font-sans);
  font-weight: var(--weight-semibold);
  font-size: var(--text-3xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--ink-0);
}
.t-h2 {
  font-family: var(--font-sans);
  font-weight: var(--weight-semibold);
  font-size: var(--text-2xl);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--ink-0);
}
.t-h3 {
  font-family: var(--font-sans);
  font-weight: var(--weight-medium);
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--ink-0);
}
.t-h4 {
  font-family: var(--font-sans);
  font-weight: var(--weight-medium);
  font-size: var(--text-md);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-normal);
  color: var(--ink-0);
}

/* Body */
.t-body {
  font-family: var(--font-sans);
  font-weight: var(--weight-regular);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--ink-1);
}
.t-body-sm {
  font-family: var(--font-sans);
  font-weight: var(--weight-regular);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--ink-1);
}

/* Meta — captions, timestamps, secondary info */
.t-meta {
  font-family: var(--font-sans);
  font-weight: var(--weight-regular);
  font-size: var(--text-xs);
  line-height: var(--leading-normal);
  color: var(--ink-2);
}

/* Eyebrow — small uppercase label */
.t-eyebrow {
  font-family: var(--font-sans);
  font-weight: var(--weight-medium);
  font-size: var(--text-xs);
  line-height: var(--leading-normal);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--ink-2);
}

/* Mono — numerals, sizes, measurements, small data */
.t-mono {
  font-family: var(--font-mono);
  font-weight: var(--weight-regular);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  letter-spacing: var(--tracking-normal);
  color: var(--ink-1);
}

/* Quote — stylist voice (italic serif body) */
.t-quote {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: var(--weight-regular);
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--ink-0);
}

/* =========================================================
   LEGACY ALIAS BRIDGE
   Maps old token names (tokens.css) to new token names.
   Keeps existing templates working during migration.
   Remove each alias once all templates are off the old name.
   ========================================================= */
:root {
  /* tokens.css background names */
  --color-bg-primary:        var(--paper-0);
  --color-bg-secondary:      var(--white);
  --color-text-primary:      var(--ink-0);
  --color-text-secondary:    var(--ink-2);
  --color-text-muted:        var(--ink-3);
  --color-border:            var(--ink-4);

  /* tokens.css brand names */
  --color-brand-primary:     var(--accent);
  --color-brand-accent:      var(--accent-soft);
  --color-brand-dark:        var(--ink-0);

  /* tokens.css semantic names */
  --color-success:           var(--success);
  --color-error:             var(--danger);
  --color-warning:           var(--warning);
  --color-info:              var(--info);

  /* premium.css / style.css names */
  --primary-color:           var(--accent);
  --accent-color:            var(--accent-soft);
  --dark-color:              var(--ink-0);
  --light-color:             var(--paper-1);
  --border-color:            var(--ink-4);
  --text-primary:            var(--ink-0);
  --text-secondary:          var(--ink-2);
  --text-muted:              var(--ink-3);

  /* Font aliases */
  --font-primary:            var(--font-sans);
  --font-secondary:          var(--font-serif);
  --body-font:               var(--font-sans);
  --heading-font:            var(--font-sans);   /* sans, not serif — serif is .t-display only */
  --font-body:               var(--font-sans);
  --font-heading:            var(--font-sans);

  /* Spacing aliases */
  --space-xs:   var(--space-2);
  --space-sm:   var(--space-3);
  --space-md:   var(--space-5);
  --space-lg:   var(--space-6);
  --space-xl:   var(--space-8);

  /* Radius aliases */
  --radius-full: var(--radius-pill);

  /* Transition aliases */
  --transition-fast: var(--duration-fast) var(--ease-standard);
  --transition-base: var(--duration-base) var(--ease-standard);

  /* Shadow aliases */
  --shadow-hover: var(--shadow-md);

  /* style.css color names */
  --dark-grey-color:         var(--ink-2);
  --grey-color:              var(--ink-3);
  --accent-lighted-color:    var(--accent-soft);
  --accent-lit-color:        var(--accent-soft);
  --accent-dim-color:        var(--paper-3);
  --primary-lighted-color:   var(--accent-soft);
  --swiper-theme-color:      var(--ink-0) !important;

  /* tokens.css tertiary/subtle names */
  --color-bg-tertiary:       var(--paper-1);
  --color-border-subtle:     var(--paper-2);

  /* tokens.css weight names */
  --font-weight-normal:      var(--weight-regular);
  --font-weight-medium:      var(--weight-medium);
  --font-weight-semibold:    var(--weight-semibold);
  --font-weight-bold:        var(--weight-bold);

  /* Spacing overflow — tokens.css defined --space-12/16, design system stops at 10 */
  --space-12:  var(--space-7);   /* 48px — closest match */
  --space-16:  var(--space-8);   /* 64px — closest match */
}