/* ============================================================
   Mookh Design System — Colors & Type tokens
   Base: 4px grid. Aesthetic: high-contrast, card-based, soft shadows.
   ============================================================ */

@import url('https://api.fontshare.com/v2/css?f[]=cabinet-grotesk@400,500,600,700,800&f[]=general-sans@400,500,600,700&f[]=bricolage-grotesque@400,500,600,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&display=swap');

:root {
  /* ---------- Brand pastels ---------- */
  --brand-yellow:  #FAED8A;
  --brand-green:   #98E8BA;
  --brand-mint:    #7BE0A3;
  --brand-purple:  #E8D1FA;
  --brand-lavender:#E8C5FD;
  --brand-pink:    #F9A8B6;
  --brand-rose:    #FFB8DE;
  --brand-sky:     #B2E9F3;
  --brand-lemon:   #FAED8A;
  --brand-salmon:  #FFB09E;

  /* ---------- Surfaces ---------- */
  --bg-page:       #E6E1D6;           /* signature beige */
  --bg-card:       #FFFFFF;
  --bg-sidebar:    rgba(255,255,255,.5);
  --input-bg:      #F0EEE6;
  --black-bg:      #1C1C1C;
  --black-bg-alt:  #31383E;

  /* ---------- Foreground (typography colors) ---------- */
  --fg-1: #111827;          /* primary body & headings */
  --fg-2: #6B7280;          /* secondary, descriptions */
  --fg-3: #9CA3AF;          /* tertiary, placeholders */
  --fg-link: #4F46E5;
  --fg-on-dark: #FFFFFF;
  --fg-on-yellow: #000000;

  /* Opacity-based ink (used in HTML designs a lot) */
  --ink-100: rgba(0,0,0,1);
  --ink-80:  rgba(0,0,0,.8);
  --ink-60:  rgba(0,0,0,.6);
  --ink-40:  rgba(0,0,0,.4);
  --ink-20:  rgba(0,0,0,.2);
  --ink-10:  rgba(0,0,0,.1);
  --ink-05:  rgba(0,0,0,.05);

  /* ---------- Borders ---------- */
  --border-subtle: #E5E7EB;
  --border-focus:  #6366F1;
  --border-hair:   rgba(0,0,0,.05);

  /* ---------- Semantic status ---------- */
  --success:       #22C55E;
  --success-soft:  #98E8BA;
  --warning:       #F59E0B;
  --warning-soft:  #FAE8A7;
  --danger:        #EF4444;
  --danger-soft:   #FECACA;
  --info:          #3B82F6;
  --info-soft:     #B2E9F3;

  /* ---------- Spacing (4px grid) ---------- */
  --space-050: 4px;
  --space-100: 8px;
  --space-150: 12px;
  --space-200: 16px;
  --space-300: 24px;
  --space-400: 32px;
  --space-500: 40px;
  --space-600: 48px;
  --space-800: 64px;

  /* ---------- Layout ---------- */
  --sidebar-width: 280px;
  --content-max:   1600px;
  --dashboard-pad: 40px;
  --grid-col-gap:  24px;
  --grid-row-gap:  24px;

  /* ---------- Radii ---------- */
  --radius-sm:   6px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  20px;
  --radius-3xl:  24px;
  --radius-4xl:  30px;     /* signature card radius */
  --radius-pill: 999px;

  /* ---------- Shadows ---------- */
  --shadow-minimal:    0 4px 40px rgba(0,0,0,.03);
  --shadow-hover:      0 10px 40px rgba(0,0,0,.08);
  --shadow-card-rest:  0 1px 3px rgba(0,0,0,.10), 0 1px 2px rgba(0,0,0,.06);
  --shadow-card-hover: 0 4px 6px -1px rgba(0,0,0,.10), 0 2px 4px -1px rgba(0,0,0,.06);
  --shadow-dropdown:   0 10px 15px -3px rgba(0,0,0,.10), 0 4px 6px -2px rgba(0,0,0,.05);
  --shadow-glow-yellow: 0 0 60px rgba(250,237,138,.4);

  /* ---------- Type families ---------- */
  --font-display: "Cabinet Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font-sans:    "General Sans", ui-sans-serif, system-ui, sans-serif;
  --font-mono:    "DM Sans", ui-monospace, monospace;
  --font-decor:   "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;

  /* ---------- Type scale ---------- */
  --font-display-lg: 600 30px/38px var(--font-display);
  --font-display-md: 600 24px/32px var(--font-display);
  --font-heading-lg: 600 18px/28px var(--font-display);
  --font-heading-md: 600 16px/24px var(--font-sans);
  --font-body-main:  400 14px/20px var(--font-sans);
  --font-body-sec:   400 13px/20px var(--font-sans);
  --font-caption:    500 12px/16px var(--font-sans);

  /* Display-oversize (dashboard hero headlines in html designs) */
  --font-hero-xl:    500 60px/1.05 var(--font-display);
  --font-hero-lg:    500 48px/1.05 var(--font-display);
}

/* ============================================================
   Base / semantic element styles
   ============================================================ */

html, body {
  background: var(--bg-page);
  font-family: var(--font-sans);
  color: var(--fg-1);
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--brand-yellow); color: #000; }

h1 { font: var(--font-hero-lg); letter-spacing: -0.02em; color: var(--fg-1); }
h2 { font: var(--font-display-lg); letter-spacing: -0.01em; color: var(--fg-1); }
h3 { font: var(--font-display-md); color: var(--fg-1); }
h4 { font: var(--font-heading-lg); color: var(--fg-1); }
h5 { font: var(--font-heading-md); color: var(--fg-1); }
p  { font: var(--font-body-main); color: var(--fg-1); }
small { font: var(--font-caption); color: var(--fg-2); }
code, kbd, pre, .mono { font-family: var(--font-mono); }

/* Utility type classes (mirror tailwind names in codebase) */
.text-display-lg { font: var(--font-display-lg); color: var(--fg-1); }
.text-display-md { font: var(--font-display-md); color: var(--fg-1); }
.text-heading-lg { font: var(--font-heading-lg); color: var(--fg-1); }
.text-heading-md { font: var(--font-heading-md); color: var(--fg-1); }
.text-body-main  { font: var(--font-body-main);  color: var(--fg-1); }
.text-body-sec   { font: var(--font-body-sec);   color: var(--fg-2); }
.text-caption    { font: var(--font-caption);    color: var(--fg-2); }

.font-display { font-family: var(--font-display); }
.font-sans    { font-family: var(--font-sans); }
.font-mono    { font-family: var(--font-mono); }

/* Surface helpers */
.card       { background: var(--bg-card); border-radius: var(--radius-4xl); box-shadow: var(--shadow-minimal); padding: var(--space-300); }
.card:hover { box-shadow: var(--shadow-hover); }
.card-sm    { border-radius: var(--radius-lg); padding: var(--space-200); box-shadow: var(--shadow-card-rest); background: var(--bg-card); }
.sidebar-surface { background: var(--bg-sidebar); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,.4); border-radius: var(--radius-3xl); }

/* Button primitives */
.btn            { display:inline-flex; align-items:center; justify-content:center; gap:8px; font: 500 14px/1 var(--font-sans); height:40px; padding:0 16px; border-radius: var(--radius-md); transition: all .2s ease; cursor:pointer; border:0; }
.btn:active     { transform: scale(.98); }
.btn-primary    { background: var(--brand-yellow); color:#000; }
.btn-primary:hover { filter: brightness(1.05); box-shadow: var(--shadow-hover); }
.btn-secondary  { background:#000; color:#fff; }
.btn-outline    { background:#fff; color:#000; border:1px solid var(--ink-10); }
.btn-ghost      { background: transparent; color:#000; }
.btn-sm         { height:32px; padding:0 12px; font-size:13px; }
.btn-lg         { height:48px; padding:0 24px; font-size:16px; }

/* Inputs */
.input {
  height:40px; padding:8px 12px; background: var(--input-bg);
  border:1px solid var(--border-subtle); border-radius: var(--radius-sm);
  font: var(--font-body-main);
}
.input:focus { outline: none; border-color: var(--brand-yellow); box-shadow: 0 0 0 2px rgba(250,237,138,.35); }

/* Badges */
.badge { display:inline-flex; align-items:center; gap:6px; padding:4px 8px; border-radius: var(--radius-sm); font: var(--font-caption); background:#fff; border:1px solid var(--ink-10); }
.badge-yellow { background: var(--brand-yellow); border-color: transparent; }
.badge-green  { background: var(--brand-green);  border-color: transparent; }
.badge-purple { background: var(--brand-purple); border-color: transparent; }
.badge-pink   { background: var(--brand-pink);   border-color: transparent; }
.badge-sky    { background: var(--brand-sky);    border-color: transparent; }