/* ============================================================
   Vibic — Colors & Type tokens
   Source of truth for the Vibic design system.
   Mirrors the shipped Flutter app constants (AppColors / AppTextStyles)
   plus a calmer "journal" surface scale documented in MOOD_BOARD.md.
   ============================================================ */

/* Brand fonts — Urbanist (sans, variable) + Square Peg (script).
   Files live under fonts/, uploaded by the brand owner. */
@font-face {
  font-family: 'Urbanist';
  src: url('fonts/Urbanist-VariableFont_wght.ttf') format('truetype-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Square Peg';
  src: url('fonts/SquarePeg-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---- BRAND ACCENTS (literal AppColors values) ------------- */
  --vibic-red:        #D92632;   /* AppColors.appRed - functional only (errors, delete) */
  --vibic-red-soft:   #F8E4E3;
  --vibic-blue:       #3563E4;   /* AppColors.appBlue */
  --vibic-blue-soft:  #E6F2FF;
  --vibic-blue-tag:   #DAEAF8;
  --vibic-blue-tag-fg:#2D7DD2;
  --vibic-primary:    #384959;   /* AppColors.primaryColor — circle accent, save fill */
  --vibic-want:       #F4B53F;
  --vibic-want-soft:  #FFF4DB;
  --vibic-green:      #1FA968;   /* Edit-Vibe success */
  /* ---- DAY 0 ILLUSTRATION PALETTE (VB-DOC-49 §0) ----------- */
  --ill-terracotta:   #D4783C;   /* one focal point per image */
  --ill-terracotta-l: #E8A46E;
  --ill-cream:        #FDF8F3;
  --ill-cream-deep:   #F5EDE4;
  --ill-sage:         #7A8B6F;
  --ill-sage-mid:     #8FAF78;
  --ill-sage-light:   #A8B89E;
  --ill-amber:        #FFD080;
  --ill-blush:        #FADADD;
  --ill-water:        #5BAEC8;
  /* ---- JOB COLOURS (icon tiles only) ----------------------- */
  --job-save-bg:      #E9EEE5;  --job-save-fg:  #5E6E54;
  --job-remember-bg:  #FBEADF;  --job-remember-fg: #B8612B;
  --job-plan-bg:      #E2F0F5;  --job-plan-fg:  #3B8AA3;
  /* Pulse v2 badge palette — pulled from card source */
  --pulse-amber-bg:   #F59E0B;
  --pulse-amber-soft: #FFFBEB;
  --pulse-amber-fg:   #92400E;
  --pulse-amber-soft-bg: #FEF3C7;
  --pulse-emerald-bg: #10B981;
  --pulse-emerald-soft: #F0FDF4;
  --pulse-emerald-fg: #16A34A;
  --pulse-indigo-bg:  #6366F1;
  --pulse-indigo-soft:#EEF2FF;
  --pulse-yellow-soft:#FDE68A;
  --pulse-orange-bg:  #CE6F36;
  --pulse-blue-bg:    #DBEAFE;
  --pulse-blue-fg:    #1E40AF;
  --pulse-mint-bg:    #D1FAE5;
  --pulse-mint-fg:    #065F46;

  /* ---- NEUTRALS / GREY SCALE -------------------------------- */
  --vibic-black:   #0A0A0A;      /* black chrome bars / type emphasis */
  --vibic-grey-900:#1A1A1A;
  --vibic-grey-700:#3F3F3F;
  --vibic-grey-500:#6B6B6B;
  --vibic-grey-400:#9A9A9A;
  --vibic-grey-300:#C7C7C7;
  --vibic-grey-200:#E4E4E4;
  --vibic-grey-100:#EFEFEF;      /* tag chip / muted button background */
  --vibic-grey-50: #F6F6F6;      /* subtle card surface */
  --vibic-white:   #FFFFFF;

  /* "Paper" surface from mood board / website hero */
  --vibic-paper:   #FDF8F3;      /* warm off-white used on website logo bg */

  /* ---- SEMANTIC ROLES --------------------------------------- */
  --color-bg:        var(--vibic-white);
  --color-bg-paper:  var(--vibic-paper);
  --color-surface:   var(--vibic-white);
  --color-surface-2: var(--vibic-grey-50);
  --color-surface-3: var(--vibic-grey-100);
  --color-chrome-bg: var(--vibic-black);     /* black pill app bar / tab bar */
  --color-chrome-fg: var(--vibic-white);

  --color-fg-1:   var(--vibic-black);        /* headings */
  --color-fg-2:   var(--vibic-grey-700);     /* body */
  --color-fg-3:   var(--vibic-grey-500);     /* secondary, captions */
  --color-fg-4:   var(--vibic-grey-400);     /* placeholder */

  --color-accent:      #D4783C;           /* terracotta: active tab, underline, selected, pins */
  --color-accent-text: #B8612B;           /* small terracotta text on white */
  --color-accent-soft: #FBEADF;
  --color-danger:      var(--vibic-red);  /* errors + destructive only */
  --color-link:   var(--vibic-blue);      /* links only */
  --color-cta:    var(--vibic-black);     /* primary buttons are black */
  --color-cta-fg: var(--vibic-white);

  --color-border: var(--vibic-grey-200);
  --color-divider:var(--vibic-grey-100);

  /* ---- TYPE FAMILIES --------------------------------------- */
  /* Brand sans = Urbanist (variable). Brand script = Square Peg — used for the
     "…map your Vibe!" sub-mark. JetBrains Mono is design-system-only. */
  --font-sans:    'Urbanist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, Menlo, monospace;
  --font-script:  'Square Peg', 'Caveat', cursive;

  /* ---- TYPE SCALE (TOKENS) --------------------------------- */
  --t-display:    700 56px/1.05 var(--font-sans);
  --t-h1:         700 36px/1.15 var(--font-sans);
  --t-h2:         700 28px/1.2  var(--font-sans);
  --t-h3:         600 22px/1.25 var(--font-sans);   /* AppTextStyles.heading3-ish */
  --t-h4:         600 18px/1.3  var(--font-sans);
  --t-body-lg:    500 17px/1.5  var(--font-sans);
  --t-body:       500 15px/1.55 var(--font-sans);   /* AppTextStyles.body 14px w500 */
  --t-body-rd:    400 15px/1.55 var(--font-sans);
  --t-caption:    500 13px/1.45 var(--font-sans);   /* AppTextStyles.caption */
  --t-overline:   600 11px/1.4  var(--font-sans);   /* "YOUR CIRCLE" labels */
  --t-button:     600 15px/1    var(--font-sans);
  --t-mono:       400 13px/1.5  var(--font-mono);

  --letter-tracked: 0.08em;   /* used on the rare overline */

  /* ---- SHAPE / RADII --------------------------------------- */
  --radius-xs:  6px;
  --radius-sm:  10px;     /* tag chip */
  --radius-md:  14px;     /* card */
  --radius-lg:  20px;     /* big card / hero photo */
  --radius-xl:  28px;     /* photo cards */
  --radius-pill:999px;    /* chrome bars, primary buttons, segmented pills */

  /* ---- ELEVATION ------------------------------------------- */
  --shadow-1: 0 1px 2px rgba(0,0,0,.04), 0 1px 3px rgba(0,0,0,.04);
  --shadow-2: 0 6px 18px rgba(0,0,0,.06), 0 2px 6px rgba(0,0,0,.04);
  --shadow-3: 0 14px 32px rgba(0,0,0,.10), 0 4px 12px rgba(0,0,0,.06);
  --shadow-photo: 0 12px 28px rgba(0,0,0,.18); /* the lifted vibe-card stack */

  /* ---- SPACING SCALE (4-pt) -------------------------------- */
  --s-1:  4px;
  --s-2:  8px;     /* AppSpacing.sm */
  --s-3:  12px;
  --s-4:  16px;    /* AppSpacing.md */
  --s-5:  20px;
  --s-6:  24px;    /* AppSpacing.lg */
  --s-8:  32px;
  --s-10: 40px;
  --s-12: 56px;

  /* ---- LAYOUT ---------------------------------------------- */
  --chrome-height: 56px;     /* black pill bars */
  --chrome-inset:  12px;     /* horizontal inset for chrome contents */
}

/* =====================  SEMANTIC HTML DEFAULTS  ===================== */

html, body {
  background: var(--color-bg);
  color: var(--color-fg-1);
  font: var(--t-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1 { font: var(--t-h1); letter-spacing: -0.02em; margin: 0 0 var(--s-4); }
h2 { font: var(--t-h2); letter-spacing: -0.015em; margin: 0 0 var(--s-3); }
h3 { font: var(--t-h3); margin: 0 0 var(--s-3); }
h4 { font: var(--t-h4); margin: 0 0 var(--s-2); }
p  { font: var(--t-body); color: var(--color-fg-2); margin: 0 0 var(--s-3); }
small { font: var(--t-caption); color: var(--color-fg-3); }
a { color: var(--color-link); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
code, pre { font: var(--t-mono); background: var(--color-surface-2); border-radius: var(--radius-xs); padding: 2px 6px; }
hr { border: 0; border-top: 1px solid var(--color-divider); margin: var(--s-6) 0; }

/* Brand wordmark composite — used in card previews */
.vibic-mark-script { font: 600 22px/1 var(--font-script); color: var(--color-fg-1); }
.vibic-overline { font: var(--t-overline); letter-spacing: var(--letter-tracked); text-transform: uppercase; color: var(--color-fg-3); }