/* MorDee Design System — Colors & Type Tokens
   Extracted from the MorDee Unified Design System (Figma)
   Primary font: Anuphan (Thai + Latin). Secondary: IBM Plex Sans Thai. */

/* ───────────────── Fonts (Google Fonts fallback) ─────────────────
   Anuphan + IBM Plex Sans Thai are both on Google Fonts. */
@import url('https://fonts.googleapis.com/css2?family=Anuphan:wght@400;500;600;700&family=IBM+Plex+Sans+Thai:wght@400;500;600;700&family=Inter:wght@400;500;600;700&display=swap');

:root {
  /* ───────── Brand core ───────── */
  --mordee-primary:       #6FC3C4;   /* primary-300 — brand teal (signature) */
  --mordee-primary-dark:  #4F8A8B;   /* primary-400 — hover / text-on-white */
  --mordee-primary-900:   #2F5252;   /* primary-900 — deep teal */
  --mordee-primary-200:   #8CCFD0;
  --mordee-primary-100:   #D2ECED;
  --mordee-primary-050:   #F1F9F9;   /* section backgrounds */
  --mordee-primary-025:   #E8F4F5;

  --mordee-secondary:     #FB735C;   /* coral accent (wordmark "DEE") */
  --mordee-secondary-dark:#693027;   /* secondary-500 (deep warm brown) */

  /* ───────── Greys ───────── */
  --grey-900: #1E1E1E;
  --grey-800: #292929;
  --grey-700: #2A2A2A;   /* most-used dark text */
  --grey-600: #484848;
  --grey-500: #717171;
  --grey-400: #AAAAAA;   /* common meta / placeholder */
  --grey-300: #DADADA;
  --grey-200: #E5E5E5;
  --grey-150: #E9EBF8;   /* default stroke */
  --grey-100: #F0F0F0;
  --grey-075: #FAFAFA;
  --grey-050: #FBFBFB;
  --white:    #FFFFFF;
  --black:    #000000;

  /* ───────── Semantic ───────── */
  --success-100: #9CD5A3;
  --success-200: #28A338;
  --success-500: #165A1F;

  --warning-100: #FFF1CC;
  --warning-300: #A97B00;
  --warning-500: #7D511D;

  --danger-100: #FBD3D3;
  --danger-200: #D63131;
  --danger-500: #761B1B;

  --info-100: #E3E5FD;
  --info-200: #006FFF;
  --info-500: #9747FF;

  /* ───────── Tag fills (from Tag palette) ───────── */
  --tag-warning-bg: #FFF1CC;
  --tag-warning-fg: #A97B00;
  --tag-info-bg:    #E3E5FD;
  --tag-info-fg:    #4858C7;

  /* ───────── Brand gradient ───────── */
  --gradient-wellness: linear-gradient(135deg, #6FC3C4 0%, #FB735C 100%);
  --gradient-brand-border: linear-gradient(90deg, #ED0B60 0%, #9A0F9A 100%);

  /* ───────── Elevation ───────── */
  --shadow-xs: 0 1px 2px rgba(42,42,42,0.06);
  --shadow-sm: 0 2px 8px rgba(42,42,42,0.08);
  --shadow-md: 0 6px 16px rgba(42,42,42,0.10);
  --shadow-lg: 0 16px 40px rgba(42,42,42,0.14);
  --shadow-card: 0 4px 12px rgba(47,82,82,0.08);

  /* ───────── Radii ───────── */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;  /* swatches, inputs, cards */
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  /* ───────── Spacing scale (mobile 4pt) ───────── */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;

  /* ───────── Mobile grid (iPhone-14 frame, 390px) ───────── */
  --grid-width: 390px;
  --grid-content: 350px;    /* 4 columns × 72px + 3 × gutter, offset 20 */
  --grid-offset: 20px;
  --grid-column: 72px;
  --grid-gutter: 20px;

  /* ───────── Typography — Mobile (Anuphan) ───────── */
  --font-primary:  'Anuphan', 'IBM Plex Sans Thai', system-ui, sans-serif;
  --font-thai:     'IBM Plex Sans Thai', 'Anuphan', system-ui, sans-serif;
  --font-ui:       'Inter', 'Anuphan', system-ui, sans-serif;

  /* Mobile scale */
  --h1:       700 48px/120% var(--font-primary);
  --h2:       700 24px/120% var(--font-primary);
  --h3:       700 18px/120% var(--font-primary);
  --h4:       600 16px/120% var(--font-primary);
  --subtitle-1: 500 16px/120% var(--font-primary);
  --subtitle-2: 600 14px/120% var(--font-primary);
  --body-1:   400 16px/120% var(--font-primary);
  --body-2:   400 14px/120% var(--font-primary);
  --small-1:  500 12px/120% var(--font-primary);
  --small-2:  400 12px/120% var(--font-primary);
  --small-3:  500 10px/120% var(--font-primary);
  --button-1: 500 16px/120% var(--font-primary);
  --button-2: 500 14px/120% var(--font-primary);
  --button-3: 600 12px/120% var(--font-primary);
  --text-link:500 12px/120% var(--font-primary);

  /* iOS scale (Typography 2 frame) */
  --ios-large-title: 400 34px/120% var(--font-primary);
  --ios-title-1:    400 28px/120% var(--font-primary);
  --ios-title-2:    400 22px/120% var(--font-primary);
  --ios-title-3:    400 20px/120% var(--font-primary);
  --ios-headline:   600 17px/120% var(--font-primary);
  --ios-body:       400 17px/120% var(--font-primary);
  --ios-callout:    400 16px/120% var(--font-primary);
  --ios-subhead:    400 15px/120% var(--font-primary);
  --ios-footnote:   400 13px/120% var(--font-primary);
  --ios-caption-1:  400 12px/120% var(--font-primary);
  --ios-caption-2:  400 11px/120% var(--font-primary);
}

/* ───────── Semantic element styles ───────── */
html, body { font: var(--body-1); color: var(--grey-700); background: var(--grey-050); }
h1 { font: var(--h1); color: var(--grey-900); letter-spacing: 0; }
h2 { font: var(--h2); color: var(--grey-900); }
h3 { font: var(--h3); color: var(--grey-900); }
h4 { font: var(--h4); color: var(--grey-800); }
p  { font: var(--body-1); color: var(--grey-700); }
small { font: var(--small-2); color: var(--grey-500); }
a { color: var(--mordee-primary-dark); text-decoration: none; }
a:hover { color: var(--mordee-primary-900); }
code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.9em; }