/* ============================================================================
   KuttyTail — Color & Type Foundations
   Source of truth: apps/mobile/src/constants/colors.ts (OKLCH tokens, hex-mirrored)
   Typeface: Plus Jakarta Sans (bundled in /fonts)
   These CSS vars mirror the React Native COLORS object 1:1 so HTML mockups
   render identically to the shipping app. Never hardcode hex — use a var.
   ============================================================================ */

/* ---- Webfonts (local .ttf copied from apps/mobile/assets/fonts) ---- */
@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('../assets/fonts/PlusJakartaSans-Regular.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('../assets/fonts/PlusJakartaSans-Medium.ttf') format('truetype');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('../assets/fonts/PlusJakartaSans-SemiBold.ttf') format('truetype');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('../assets/fonts/PlusJakartaSans-Bold.ttf') format('truetype');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('../assets/fonts/PlusJakartaSans-ExtraBold.ttf') format('truetype');
  font-weight: 800; font-style: normal; font-display: swap;
}

:root {
  /* ============================ COLOR ============================ */
  /* — Primary (blue): actions, active states, focus, links — */
  --primary:      #3B73C8;   /* oklch(52% 0.13 220) */
  --primary-50:   #EBF3FF;
  --primary-100:  #D6E8FF;
  --primary-200:  #B3D1FF;
  --primary-700:  #1B4FA8;   /* pressed / on-tint text */

  /* — Accent (cool indigo): reserved for "AI generated / extracted" —
     NOTE: the shipping codebase uses an orange accent oklch(62% 0.19 35) for AI.
     Per design-owner direction this system uses a COOL indigo instead — the
     orange/pink read as error/warning. Orange is kept as a Tweaks option. */
  --accent:       #6366D9;   /* cool indigo — the AI signal */
  --accent-50:    #EEEFFB;
  --accent-tint:  #E9EBF8;   /* AI insight card fill */

  /* — Neutrals / surfaces — */
  --bg:           #F7F9FB;   /* app background */
  --surface:      #FEFEFF;   /* cards, sheets, inputs */
  --subtle:       #F9FAFB;   /* quiet fills, quote boxes, chips */

  /* — Text — */
  --fg1:          #0F1623;   /* titles, primary text */
  --fg2:          #6B7185;   /* body, secondary */
  --fg3:          #9CA3B4;   /* captions, placeholders, disabled */

  /* — Lines — */
  --border:       #DDE3EB;

  /* — Semantic — */
  --success:      #1A9B4B;  --success-50: #ECFDF5;  --success-700: #106B34;
  --warning:      #D4930A;  --warning-50: #FFFBEC;
  --error:        #D62B2B;  --error-50:   #FEF1F1;
  --water:        #0580B9;  --water-50:   #E8F4FD;   /* water log accent */

  /* — Brand mark colors (logo only — NOT app UI) — */
  --brand-teal:   #1E8A8A;
  --brand-brown:  #4A3528;
  --brand-cream:  #FBF6EC;
  --brand-coral:  #FF8A7A;

  /* ============================ TYPE ============================ */
  --font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Weights used in the app */
  --w-regular: 400;
  --w-medium:  500;
  --w-semibold:600;
  --w-bold:    700;
  --w-extrabold:800;

  /* Type scale (px / weight / tracking) — lifted from shipping components */
  --t-title-size: 24px;  --t-title-weight: 800; --t-title-track: -0.02em;  /* screen titles, celebration */
  --t-h1-size:    22px;  --t-h1-weight:    800; --t-h1-track:   -0.4px;     /* card title, edit headline */
  --t-section-size:17px; --t-section-weight:700; --t-section-track:-0.2px;  /* section headers, sheet titles */
  --t-body-size:  15px;  --t-body-weight:  500; --t-body-track:  0;         /* body / input text */
  --t-body-sm-size:14px; --t-body-sm-weight:500;                            /* secondary body, list rows */
  --t-label-size: 13px;  --t-label-weight: 600;                             /* form labels */
  --t-caption-size:12px; --t-caption-weight:600;                            /* timestamps, helper */
  --t-overline-size:11px;--t-overline-weight:700;--t-overline-track:0.6px;  /* "YOU SAID", "AI SUGGESTION" */

  /* ============================ SHAPE & ELEVATION ============================ */
  --r-pill:    999px;   /* chips, badges, toggles */
  --r-input:   12px;    /* inputs, small buttons */
  --r-button:  14px;    /* primary buttons */
  --r-card:    16px;    /* PCard, insight cards */
  --r-card-lg: 20px;    /* candidate card, big surfaces */
  --r-sheet:   22px;    /* bottom-sheet top corners (20–24 range) */

  /* Shadows — soft, low-opacity, neutral (never colored except AI sticker) */
  --shadow-card:  0 2px 8px rgba(0,0,0,0.06);                 /* PCard */
  --shadow-float: 0 12px 32px rgba(0,0,0,0.10);               /* candidate card, FAB */
  --shadow-btn:   0 4px 12px rgba(0,0,0,0.08);                /* round action buttons */
  --shadow-ai:    0 2px 6px rgba(99,102,217,0.32);             /* the ONE colored shadow: AI sticker */

  /* Spacing rhythm (multiples of ~4; common paddings 14/16/18/20) */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 14px;
  --sp-5: 16px; --sp-6: 18px; --sp-7: 20px; --sp-8: 24px;
}

/* ============================ SEMANTIC HELPERS ============================ */
/* Convenience classes for HTML mockups — mirror the RN StyleSheet patterns. */
body { font-family: var(--font-sans); color: var(--fg1); background: var(--bg); }

.kt-title    { font-size: var(--t-title-size);   font-weight: var(--t-title-weight);   letter-spacing: var(--t-title-track); color: var(--fg1); }
.kt-h1       { font-size: var(--t-h1-size);      font-weight: var(--t-h1-weight);      letter-spacing: var(--t-h1-track);    color: var(--fg1); }
.kt-section  { font-size: var(--t-section-size); font-weight: var(--t-section-weight); letter-spacing: var(--t-section-track); color: var(--fg1); }
.kt-body     { font-size: var(--t-body-size);    font-weight: var(--t-body-weight);    color: var(--fg2); line-height: 1.4; }
.kt-label    { font-size: var(--t-label-size);   font-weight: var(--t-label-weight);   color: var(--fg2); }
.kt-caption  { font-size: var(--t-caption-size); font-weight: var(--t-caption-weight); color: var(--fg3); }
.kt-overline { font-size: var(--t-overline-size);font-weight: var(--t-overline-weight);letter-spacing: var(--t-overline-track); color: var(--fg3); text-transform: uppercase; }

.kt-card     { background: var(--surface); border-radius: var(--r-card); padding: 16px; box-shadow: var(--shadow-card); }