/* =========================================================
   ASSORT DESIGN SYSTEM — DESIGN TOKENS
   Source of truth: Assort OS V10 mockups + verified screens
   Used across ALL tabs (Today, Sales, Marketing, Attendance,
   Manage, Settings, etc.). One app, one system — no per-tab
   variants.
   =========================================================
   USAGE
   - In production code: import this once at the app root,
     via @import "design-system/tokens.css"; or a <link>.
   - Never hardcode hex codes, font names, radii, or spacing
     values. ALWAYS reference a var(--*) token from this file.
   - If a value isn't here and you need it, add it here FIRST,
     then reference it. Don't fork or inline.
   ========================================================= */

/* ---------- Fonts (Google Fonts CDN) ----------
   DM Sans          → 100% of UI (body, buttons, numerics,
                      ASSORT HAIR wordmark, headlines)
   Inter            → fallback only; matches DM Sans metrics
   JetBrains Mono   → mono / tabular debug / timecard IDs
   Poppins          → display accent (marketing surfaces only)
*/
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&family=Poppins:wght@300;400;500;600;700;800&display=swap');

:root {
  /* ---------- Color: Surfaces ---------- */
  --bg:           #fafafa;  /* page background */
  --card:         #f5f5f7;  /* flat tint card */
  --white:        #ffffff;  /* elevated card / sheet */
  --surface-tint: #f0f0f5;  /* icon wells, avatars */
  --avatar-bg:    #e8e8ed;  /* avatar / chip / badge circle fill (rule §12) */
  --fill-tint:    #f2f2f7;  /* iOS grouped bg: chips, info boxes, bar tracks */

  /* ---------- Color: Foreground ---------- */
  --text:     #1a1a1a;  /* primary ink (never pure black) */
  --text-mid: #636366;  /* mid ink on tinted fills (between text & text2) */
  --text2:    #8e8e93;  /* secondary, labels, eyebrows */
  --text3:    #c7c7cc;  /* tertiary, disabled */

  /* ---------- Color: Semantic accents (iOS system-style) ---------- */
  --blue:    #007AFF;  /* primary action, links */
  --green:   #34C759;  /* success, clock-in OK, positive delta */
  --red:     #FF3B30;  /* error, urgent, negative */
  --orange:  #FF9500;  /* warning, pending, late */

  /* ---------- Color: Ink accents (dark enough for text/borders) ---------- */
  --blue-ink:      #1565c0;  /* readable blue body text */
  --orange-ink:    #e65100;  /* manager-override accent text */
  --orange-border: #ffb74d;  /* manager-override accent border */
  --purple:  #AF52DE;  /* projections / forecast ONLY */
  --indigo:  #5856D6;  /* secondary accent */
  --teal:      #0a7ea4;  /* scheduled-freelancer role badge */
  --green-ink: #1a7f37;  /* readable green on green-tint (clocked-in status text) */
  --pink:    #FF2D55;  /* NEW badges */
  --yellow:  #FFD700;  /* rank gold */

  /* ---------- Color: Soft accent tints (card backgrounds) ---------- */
  --blue-tint:   #F0F5FF;
  --blue-tint-2: #e3f2fd;  /* paler blue info-card bg (= gradient-ai 2nd stop) */
  --green-tint:  #E8F5E9;
  --red-tint:    #FFEBEE;
  --orange-tint: #FFF3E0;
  --purple-tint: #F8F6FF;

  /* ---------- Color: Lines ---------- */
  --border:       #e5e5ea;  /* standard hairline */
  --border-soft:  #f0f0f2;  /* inner row divider */
  --border-input: #e5e5ea;

  /* ---------- The ONLY allowed gradients ----------
     Use exclusively for projection cards (purple) and
     AI / insight cards (blue). Nowhere else. */
  --gradient-projection: linear-gradient(135deg, #F8F6FF, #F0EDFF);
  --gradient-ai:         linear-gradient(135deg, #F0F5FF, #E3F2FD);

  /* ---------- Typography — Families ---------- */
  --font-sans:    'DM Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'DM Sans', 'Inter', -apple-system, sans-serif;       /* wordmark + headlines */
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --font-poppins: 'Poppins', 'DM Sans', -apple-system, sans-serif;     /* marketing-surface accent only */

  /* ---------- Typography — Roles ---------- */
  /* Display (hero wordmark moments) */
  --display-size:   34px;
  --display-weight: 600;
  --display-track:  10px;     /* ASSORT HAIR hero tracking */

  /* Wordmark in app header */
  --wordmark-size:    22px;
  --wordmark-weight:  600;
  --wordmark-track:   6px;

  /* Page title */
  --h1-size: 22px;   --h1-weight: 700;  --h1-lh: 1.25;
  /* Section title (card headers) */
  --h2-size: 18px;   --h2-weight: 700;  --h2-lh: 1.30;
  /* Sub title */
  --h3-size: 16px;   --h3-weight: 600;  --h3-lh: 1.35;
  /* Body */
  --body-size: 15px; --body-weight: 400; --body-lh: 1.45;
  /* Compact body (most UI rows) */
  --body-sm-size: 13px; --body-sm-weight: 500;
  /* Caption / micro-label */
  --caption-size: 12px; --caption-weight: 500;
  /* Eyebrow — uppercase tracked section label */
  --eyebrow-size: 11px; --eyebrow-weight: 700; --eyebrow-track: 1.2px;
  /* Metric / KPI big number */
  --metric-size: 28px; --metric-weight: 700;

  /* ---------- Radii ----------
     Card default is 14px. Memorize this. */
  --radius-xs:   6px;    /* tiny chips, status bar pct */
  --radius-sm:   8px;    /* inputs, small buttons */
  --radius-md:   10px;   /* toggles, small cards */
  --radius-lg:   12px;   /* buttons, dense cards */
  --radius:      14px;   /* ** PRIMARY CARD RADIUS ** */
  --radius-xl:   20px;   /* chip pill */
  --radius-full: 9999px;

  /* ---------- Shadows / elevation ----------
     The app is MOSTLY FLAT. Cards lean on hairline borders +
     white-on-#fafafa, not shadow. */
  --shadow-none: none;
  --shadow-xs:   0 1px 2px rgba(0,0,0,0.04);
  --shadow-sm:   0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.06); /* active segment ONLY */
  --shadow-md:   0 2px 8px rgba(0,0,0,0.06);
  --shadow-lg:   0 8px 24px rgba(0,0,0,0.08); /* modal / sheet */
  --shadow-inset-seg: inset 0 -2px 0 var(--blue); /* active tab underline */

  /* ---------- Spacing (4-pt grid) ---------- */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  6px;
  --space-3:  8px;
  --space-4:  10px;
  --space-5:  12px;
  --space-6:  14px;
  --space-7:  16px;   /* standard gutter */
  --space-8:  18px;
  --space-9:  20px;   /* page padding-x */
  --space-10: 24px;
  --space-12: 32px;
  --space-16: 48px;

  /* Layout rails */
  --gutter:     16px; /* card margin from screen edges */
  --page-pad-x: 20px; /* non-card content indent */
  --tap-target: 44px; /* min hit target */
  --app-max-w:  500px;/* mobile app max width */
  --nav-h:      82px; /* bottom nav height (incl. safe area) */

  /* ---------- Motion ---------- */
  --ease-std: cubic-bezier(.2, 0, 0, 1);   /* iOS-like default */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --dur-xs:   120ms;
  --dur-sm:   150ms;  /* chips, buttons */
  --dur-md:   200ms;  /* cards, toggles */
  --dur-lg:   300ms;  /* progress bars */
  --dur-xl:   600ms;  /* staged bar fills */

  /* ---------- Z-index ---------- */
  --z-nav:   90;
  --z-sheet: 100;
  --z-toast: 200;
}

/* =========================================================
   SEMANTIC TYPE CLASSES
   Use these instead of writing font-size / weight inline.
   ========================================================= */
.type-display {
  font-family: var(--font-display);
  font-size: var(--display-size);
  font-weight: var(--display-weight);
  letter-spacing: var(--display-track);
  text-transform: uppercase;
  color: var(--text);
  line-height: 1.1;
}
.type-wordmark {
  /* "ASSORT HAIR" in app header */
  font-family: var(--font-display);
  font-size: var(--wordmark-size);
  font-weight: var(--wordmark-weight);
  letter-spacing: var(--wordmark-track);
  text-transform: uppercase;
  color: var(--text);
}
.type-h1 {
  font-family: var(--font-sans);
  font-size: var(--h1-size);
  font-weight: var(--h1-weight);
  line-height: var(--h1-lh);
  color: var(--text);
  letter-spacing: -0.01em;
}
.type-h2 {
  font-family: var(--font-sans);
  font-size: var(--h2-size);
  font-weight: var(--h2-weight);
  line-height: var(--h2-lh);
  color: var(--text);
}
.type-h3 {
  font-family: var(--font-sans);
  font-size: var(--h3-size);
  font-weight: var(--h3-weight);
  line-height: var(--h3-lh);
  color: var(--text);
}
.type-body {
  font-family: var(--font-sans);
  font-size: var(--body-size);
  font-weight: var(--body-weight);
  line-height: var(--body-lh);
  color: var(--text);
}
.type-body-sm {
  font-family: var(--font-sans);
  font-size: var(--body-sm-size);
  font-weight: 500;
  line-height: 1.4;
  color: var(--text);
}
.type-caption {
  font-family: var(--font-sans);
  font-size: var(--caption-size);
  font-weight: 500;
  color: var(--text2);
}
.type-eyebrow {
  font-family: var(--font-sans);
  font-size: var(--eyebrow-size);
  font-weight: var(--eyebrow-weight);
  letter-spacing: var(--eyebrow-track);
  text-transform: uppercase;
  color: var(--text2);
}
.type-metric {
  font-family: var(--font-sans);
  font-size: var(--metric-size);
  font-weight: var(--metric-weight);
  color: var(--text);
  font-variant-numeric: tabular-nums lining-nums;
  letter-spacing: -0.01em;
}
.type-mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

/* =========================================================
   CANONICAL CARD (copy this exactly for new cards)
   ========================================================= */
.card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
  margin: 0 var(--gutter) 10px;
}
.card-flat {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
  margin: 0 var(--gutter) 10px;
}

/* =========================================================
   BASE RESET (opt-in via .assort-reset on <body> or root)
   ========================================================= */
.assort-reset,
.assort-reset * {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}
.assort-reset body {
  margin: 0;
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--text);
}