/* direction-a.css — "Tiến hoá dè dặt" (conservative evolution) */
/* Usage in a Tailwind v4 project:  @import "tailwindcss";  @import "./direction-a.css"; */

/* ===== WF-RAMP-V1 BEGIN — source of truth: docs/design-system/01-brand-core.md.
   Do not edit here; edit brand-core and re-paste this block verbatim. ===== */
:root {
  /* red — sampled from logo-wfvn.png, hue 22.9deg constant */
  --wf-red-50: #ffe4e0;   /* derived: OKLCH ramp from --wf-red-600 */
  --wf-red-100: #ffd7d3;  /* derived: OKLCH ramp from --wf-red-600 */
  --wf-red-200: #ffc3be;  /* derived: OKLCH ramp from --wf-red-600 */
  --wf-red-300: #ffa5a1;  /* derived: OKLCH ramp from --wf-red-600 */
  --wf-red-400: #ff807d;  /* derived: OKLCH ramp from --wf-red-600 */
  --wf-red-500: #f1585a;  /* derived: OKLCH ramp from --wf-red-600 */
  --wf-red-600: #de293a;  /* sampled: logo-wfvn.png core px, n=32084 */
  --wf-red-700: #ad252f;  /* derived: OKLCH ramp from --wf-red-600 */
  --wf-red-800: #841d23;  /* derived: OKLCH ramp from --wf-red-600 */
  --wf-red-900: #5d1418;  /* derived: OKLCH ramp from --wf-red-600 */

  /* green — sampled from logo-wfvn.png, hue 161.2deg constant */
  --wf-green-50: #e3fdee;   /* derived: OKLCH ramp from --wf-green-600 */
  --wf-green-100: #d1f2e0;  /* derived: OKLCH ramp from --wf-green-600 */
  --wf-green-200: #b9e2cc;  /* derived: OKLCH ramp from --wf-green-600 */
  --wf-green-300: #98cbb0;  /* derived: OKLCH ramp from --wf-green-600 */
  --wf-green-400: #6fb190;  /* derived: OKLCH ramp from --wf-green-600 */
  --wf-green-500: #449871;  /* derived: OKLCH ramp from --wf-green-600 */
  --wf-green-600: #217d57;  /* sampled: logo-wfvn.png core px, n=6831 */
  --wf-green-700: #286348;  /* derived: OKLCH ramp from --wf-green-600 */
  --wf-green-800: #204f39;  /* derived: OKLCH ramp from --wf-green-600 */
  --wf-green-900: #173b2a;  /* derived: OKLCH ramp from --wf-green-600 */

  /* neutral — warm OKLCH hue 75deg, low chroma; 900 pushed darker for focus contrast */
  --wf-neutral-50: #f8f5f1;   /* derived: warm neutral ramp, hue 75 */
  --wf-neutral-100: #ede9e4;  /* derived: warm neutral ramp, hue 75 */
  --wf-neutral-200: #ddd8d2;  /* derived: warm neutral ramp, hue 75 */
  --wf-neutral-300: #c6c1b9;  /* derived: warm neutral ramp, hue 75 */
  --wf-neutral-400: #aca59b;  /* derived: warm neutral ramp, hue 75 */
  --wf-neutral-500: #928a7f;  /* derived: warm neutral ramp, hue 75 */
  --wf-neutral-600: #797167;  /* derived: warm neutral ramp, hue 75 */
  --wf-neutral-700: #605a52;  /* derived: warm neutral ramp, hue 75 */
  --wf-neutral-800: #4a463f;  /* derived: warm neutral ramp, hue 75 */
  --wf-neutral-900: #1c1a17;  /* derived: warm neutral ramp, hue 75, deepened for --color-focus */

  /* amber — warning only, not a full ramp */
  --wf-amber-100: #ffe5bf;  /* estimated: warning hue tuned in OKLCH, not brand-sourced */
  --wf-amber-500: #bc7c00;  /* estimated: warning hue tuned in OKLCH, not brand-sourced */
  --wf-amber-700: #7f4f00;  /* estimated: warning hue tuned in OKLCH, not brand-sourced */

  --wf-white: #ffffff;  /* estimated: pure white constant, no brand source */
}
/* ===== WF-RAMP-V1 END ===== */

:root {
  /* typography — Be Vietnam Pro for both heading and body, see 02-direction-a.md */
  --wf-font-heading: "Be Vietnam Pro", "Segoe UI", ui-sans-serif, system-ui, sans-serif;
  --wf-font-body: "Be Vietnam Pro", "Segoe UI", ui-sans-serif, system-ui, sans-serif;

  --wf-size-display: 2.5rem;    /* 40px */
  --wf-size-h1: 2rem;           /* 32px */
  --wf-size-h2: 1.5rem;         /* 24px */
  --wf-size-h3: 1.25rem;        /* 20px */
  --wf-size-body-lg: 1.125rem;  /* 18px */
  --wf-size-body: 1rem;         /* 16px */
  --wf-size-caption: 0.875rem;  /* 14px */

  --wf-lh-display: 1.2;
  --wf-lh-h1: 1.25;
  --wf-lh-h2: 1.3;
  --wf-lh-h3: 1.35;
  --wf-lh-body-lg: 1.6;
  --wf-lh-body: 1.6;
  --wf-lh-caption: 1.45;

  --wf-ls-display: -0.01em;
  --wf-ls-h1: -0.01em;
  --wf-ls-h2: -0.005em;
  --wf-ls-h3: 0em;
  --wf-ls-body-lg: 0em;
  --wf-ls-body: 0em;
  --wf-ls-caption: 0.01em;

  --wf-weight-heading: 700;
  --wf-weight-body: 400;
  --wf-weight-emphasis: 600;

  /* spacing — 4px base unit */
  --wf-space-1: 0.25rem;   /* 4px */
  --wf-space-2: 0.5rem;    /* 8px */
  --wf-space-3: 0.75rem;   /* 12px */
  --wf-space-4: 1rem;      /* 16px */
  --wf-space-5: 1.25rem;   /* 20px */
  --wf-space-6: 1.5rem;    /* 24px */
  --wf-space-8: 2rem;      /* 32px */
  --wf-space-12: 3rem;     /* 48px */
  --wf-space-16: 4rem;     /* 64px */
  --wf-space-24: 6rem;     /* 96px */

  /* shape — borders instead of shadows, see 02-direction-a.md */
  --wf-radius-xs: 0.25rem;   /* 4px */
  --wf-radius-sm: 0.375rem; /* 6px */
  --wf-radius-md: 0.5rem;   /* 8px */
  --wf-radius-lg: 0.75rem;  /* 12px */
  --wf-radius-full: 9999px;

  --wf-shadow-sm: none; /* Direction A uses borders, not shadows — see 02-direction-a.md */
  --wf-shadow-md: none; /* Direction A uses borders, not shadows — see 02-direction-a.md */
  --wf-shadow-lg: none; /* Direction A uses borders, not shadows — see 02-direction-a.md */

  --wf-border-width: 1px;
  --wf-border-width-strong: 2px;

  --wf-container: 1200px;
}


/* ---------------------------------------------------------------------------
   Layer 2b — the SAME aliases as the @theme inline block below, mirrored as
   ordinary custom properties.
   Why this exists: `@theme` is an unknown at-rule to a browser, so a browser
   loading this file directly (no Tailwind build) silently discards the whole
   block and every var(--color-*) used by the components below resolves to
   nothing — buttons render transparent. Tailwind still reads @theme inline for
   utility generation. Values are identical; edit both together.
   --------------------------------------------------------------------------- */
:root {
  --color-brand: var(--wf-red-600);
  --color-brand-strong: var(--wf-red-700);
  --color-accent: var(--wf-green-600);
  --color-bg: var(--wf-neutral-50);
  --color-bg-subtle: var(--wf-white);
  --color-surface: var(--wf-white);
  --color-text: var(--wf-neutral-900);
  --color-text-muted: var(--wf-neutral-700);
  --color-border: var(--wf-neutral-300);
  --color-border-strong: var(--wf-neutral-500);
  --color-success: var(--wf-green-700);
  --color-warning: var(--wf-amber-700);
  --color-danger: var(--wf-red-700);
  --color-info: var(--wf-neutral-700);
  --color-brand-ink: var(--wf-red-700);
  --color-brand-surface: var(--wf-red-500);
  --color-on-brand: var(--wf-white);
  --color-on-accent: var(--wf-white);
  --color-success-surface: var(--wf-green-100);
  --color-warning-surface: var(--wf-amber-100);
  --color-danger-surface: var(--wf-red-100);
  --color-info-surface: var(--wf-neutral-100);
  --color-focus: var(--wf-neutral-900);
  --color-disabled-bg: var(--wf-neutral-200);
  --color-disabled-text: var(--wf-neutral-400);
  --font-heading: var(--wf-font-heading);
  --font-body: var(--wf-font-body);
  --text-display: var(--wf-size-display);
  --text-h1: var(--wf-size-h1);
  --text-h2: var(--wf-size-h2);
  --text-h3: var(--wf-size-h3);
  --text-body-lg: var(--wf-size-body-lg);
  --text-body: var(--wf-size-body);
  --text-caption: var(--wf-size-caption);
  --leading-display: var(--wf-lh-display);
  --leading-h1: var(--wf-lh-h1);
  --leading-h2: var(--wf-lh-h2);
  --leading-h3: var(--wf-lh-h3);
  --leading-body-lg: var(--wf-lh-body-lg);
  --leading-body: var(--wf-lh-body);
  --leading-caption: var(--wf-lh-caption);
  --tracking-display: var(--wf-ls-display);
  --tracking-h1: var(--wf-ls-h1);
  --tracking-h2: var(--wf-ls-h2);
  --tracking-h3: var(--wf-ls-h3);
  --tracking-body-lg: var(--wf-ls-body-lg);
  --tracking-body: var(--wf-ls-body);
  --tracking-caption: var(--wf-ls-caption);
  --spacing-1: var(--wf-space-1);
  --spacing-2: var(--wf-space-2);
  --spacing-3: var(--wf-space-3);
  --spacing-4: var(--wf-space-4);
  --spacing-5: var(--wf-space-5);
  --spacing-6: var(--wf-space-6);
  --spacing-8: var(--wf-space-8);
  --spacing-12: var(--wf-space-12);
  --spacing-16: var(--wf-space-16);
  --spacing-24: var(--wf-space-24);
  --radius-xs: var(--wf-radius-xs);
  --radius-sm: var(--wf-radius-sm);
  --radius-md: var(--wf-radius-md);
  --radius-lg: var(--wf-radius-lg);
  --radius-full: var(--wf-radius-full);
  --shadow-sm: var(--wf-shadow-sm);
  --shadow-md: var(--wf-shadow-md);
  --shadow-lg: var(--wf-shadow-lg);
}

@theme inline {
  /* semantic colour aliases — Hướng A: đỏ dẫn cấu trúc, xanh lá lùi về nhấn hẹp (mục 8 brand-core) */
  --color-brand: var(--wf-red-600);
  --color-brand-strong: var(--wf-red-700);
  --color-accent: var(--wf-green-600);

  --color-bg: var(--wf-neutral-50);
  --color-bg-subtle: var(--wf-white);
  --color-surface: var(--wf-white);

  --color-text: var(--wf-neutral-900);
  --color-text-muted: var(--wf-neutral-700);

  --color-border: var(--wf-neutral-300);
  --color-border-strong: var(--wf-neutral-500);

  --color-success: var(--wf-green-700);
  --color-warning: var(--wf-amber-700);
  --color-danger: var(--wf-red-700);
  --color-info: var(--wf-neutral-700);

  --color-brand-ink: var(--wf-red-700);
  --color-brand-surface: var(--wf-red-500);
  --color-on-brand: var(--wf-white);
  --color-on-accent: var(--wf-white);

  --color-success-surface: var(--wf-green-100);
  --color-warning-surface: var(--wf-amber-100);
  --color-danger-surface: var(--wf-red-100);
  --color-info-surface: var(--wf-neutral-100);

  --color-focus: var(--wf-neutral-900);

  --color-disabled-bg: var(--wf-neutral-200);
  --color-disabled-text: var(--wf-neutral-400);

  /* Tailwind namespace mappings */
  --font-heading: var(--wf-font-heading);
  --font-body: var(--wf-font-body);

  --text-display: var(--wf-size-display);
  --text-h1: var(--wf-size-h1);
  --text-h2: var(--wf-size-h2);
  --text-h3: var(--wf-size-h3);
  --text-body-lg: var(--wf-size-body-lg);
  --text-body: var(--wf-size-body);
  --text-caption: var(--wf-size-caption);

  --leading-display: var(--wf-lh-display);
  --leading-h1: var(--wf-lh-h1);
  --leading-h2: var(--wf-lh-h2);
  --leading-h3: var(--wf-lh-h3);
  --leading-body-lg: var(--wf-lh-body-lg);
  --leading-body: var(--wf-lh-body);
  --leading-caption: var(--wf-lh-caption);

  --tracking-display: var(--wf-ls-display);
  --tracking-h1: var(--wf-ls-h1);
  --tracking-h2: var(--wf-ls-h2);
  --tracking-h3: var(--wf-ls-h3);
  --tracking-body-lg: var(--wf-ls-body-lg);
  --tracking-body: var(--wf-ls-body);
  --tracking-caption: var(--wf-ls-caption);

  --spacing-1: var(--wf-space-1);
  --spacing-2: var(--wf-space-2);
  --spacing-3: var(--wf-space-3);
  --spacing-4: var(--wf-space-4);
  --spacing-5: var(--wf-space-5);
  --spacing-6: var(--wf-space-6);
  --spacing-8: var(--wf-space-8);
  --spacing-12: var(--wf-space-12);
  --spacing-16: var(--wf-space-16);
  --spacing-24: var(--wf-space-24);

  --radius-xs: var(--wf-radius-xs);
  --radius-sm: var(--wf-radius-sm);
  --radius-md: var(--wf-radius-md);
  --radius-lg: var(--wf-radius-lg);
  --radius-full: var(--wf-radius-full);

  --shadow-sm: var(--wf-shadow-sm);
  --shadow-md: var(--wf-shadow-md);
  --shadow-lg: var(--wf-shadow-lg);
}

@layer components {
  /* ---- button ---- */
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--wf-space-2);
    font-family: var(--font-body);
    font-weight: var(--wf-weight-emphasis);
    font-size: var(--text-body);
    line-height: var(--leading-body);
    border-radius: var(--radius-sm);
    border: var(--wf-border-width) solid transparent;
    padding: var(--wf-space-3) var(--wf-space-5);
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
  }
  .btn-sm {
    padding: var(--wf-space-2) var(--wf-space-3);
    font-size: var(--text-caption);
    line-height: var(--leading-caption);
  }
  .btn-md {
    padding: var(--wf-space-3) var(--wf-space-5);
    font-size: var(--text-body);
    line-height: var(--leading-body);
  }
  .btn-lg {
    padding: var(--wf-space-4) var(--wf-space-8);
    font-size: var(--text-body-lg);
    line-height: var(--leading-body-lg);
  }

  .btn-primary {
    background-color: var(--color-brand);
    border-color: var(--color-brand);
    color: var(--color-on-brand);
  }
  .btn-primary:hover {
    background-color: var(--color-brand-strong);
    border-color: var(--color-brand-strong);
  }

  .btn-secondary {
    background-color: transparent;
    border-color: var(--color-brand);
    border-width: var(--wf-border-width-strong);
    color: var(--color-brand-ink);
  }
  .btn-secondary:hover {
    background-color: var(--wf-red-50);
  }

  .btn-ghost {
    background-color: transparent;
    border-color: transparent;
    color: var(--color-brand-ink);
  }
  .btn-ghost:hover {
    background-color: var(--wf-red-50);
  }

  .btn:focus-visible {
    outline: var(--wf-border-width-strong) solid var(--color-focus);
    outline-offset: 2px;
  }
  .btn:disabled,
  .btn.is-loading {
    background-color: var(--color-disabled-bg);
    border-color: var(--color-disabled-bg);
    color: var(--color-disabled-text);
    cursor: not-allowed;
  }
  .btn.is-loading {
    position: relative;
    color: transparent;
  }
  .btn.is-loading::after {
    content: "";
    position: absolute;
    width: 1em;
    height: 1em;
    border-radius: var(--radius-full);
    border: var(--wf-border-width-strong) solid var(--wf-neutral-400);
    border-top-color: var(--wf-neutral-700);
    animation: wf-spin 700ms linear infinite;
  }
  @keyframes wf-spin {
    to { transform: rotate(360deg); }
  }

  /* ---- input / textarea / select ---- */
  .input {
    display: block;
    width: 100%;
    font-family: var(--font-body);
    font-size: var(--text-body);
    line-height: var(--leading-body);
    color: var(--color-text);
    background-color: var(--color-surface);
    border: var(--wf-border-width) solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: var(--wf-space-3) var(--wf-space-4);
    transition: border-color 150ms ease, outline-color 150ms ease;
  }
  .input::placeholder {
    color: var(--color-text-muted);
  }
  .input:focus {
    outline: var(--wf-border-width-strong) solid var(--color-focus);
    outline-offset: 1px;
    border-color: var(--color-focus);
  }
  .input.is-error {
    border-color: var(--color-danger);
  }
  .input:disabled {
    background-color: var(--color-disabled-bg);
    color: var(--color-disabled-text);
    border-color: var(--color-border);
    cursor: not-allowed;
  }

  /* ---- card ---- */
  .card {
    background-color: var(--color-surface);
    border: var(--wf-border-width) solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--wf-space-4);
    box-shadow: var(--shadow-sm);
  }

  /* ---- status badge ---- */
  .badge {
    display: inline-flex;
    align-items: center;
    gap: var(--wf-space-1);
    font-family: var(--font-body);
    font-weight: var(--wf-weight-emphasis);
    font-size: var(--text-caption);
    line-height: var(--leading-caption);
    padding: var(--wf-space-1) var(--wf-space-3);
    border-radius: var(--radius-sm);
  }
  .badge::before {
    display: inline-block;
    font-weight: 400;
  }
  .badge-open {
    background-color: var(--wf-green-300);
    color: var(--wf-green-800);
    border: var(--wf-border-width) solid var(--wf-green-800);
  }
  .badge-open::before {
    content: "\25CF"; /* ● filled disc */
  }
  .badge-closing {
    background-color: var(--wf-amber-700);
    color: var(--wf-white);
    border: var(--wf-border-width) dashed var(--wf-white);
  }
  .badge-closing::before {
    content: "\25B2"; /* ▲ triangle */
  }
  .badge-closed {
    background-color: var(--wf-neutral-900);
    color: var(--wf-white);
    border: none;
  }
  .badge-closed::before {
    content: "\2298"; /* U+2298 — slashed circle */
  }

  /* ---- filter chip ---- */
  .chip {
    display: inline-flex;
    align-items: center;
    gap: var(--wf-space-1);
    font-family: var(--font-body);
    font-size: var(--text-caption);
    line-height: var(--leading-caption);
    color: var(--color-text);
    background-color: var(--color-surface);
    border: var(--wf-border-width) solid var(--color-border);
    border-radius: var(--radius-full);
    padding: var(--wf-space-1) var(--wf-space-4);
    cursor: pointer;
    transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
  }
  .chip.is-active {
    background-color: var(--color-brand);
    border-color: var(--color-brand);
    color: var(--color-on-brand);
  }
}