/* ============================================================
   Fashion AI Workflow — Design Tokens
   Dark editorial / precision studio aesthetic
   ============================================================ */

@import url('fonts/fonts.css');

:root {
  /* ---------- Surface / background layers ---------- */
  --bg-base:     #080810;   /* deepest — page background */
  --bg-card:     #13131f;   /* card / module surface */
  --bg-elevated: #1a1a28;   /* hover / nested surface */
  --bg-input:    #080810;   /* input field bg = base */

  /* ---------- Borders ---------- */
  --border:        rgba(255, 255, 255, 0.07);
  --border-strong: rgba(255, 255, 255, 0.14);
  --border-focus:  rgba(168, 139, 250, 0.50);

  /* ---------- Text ---------- */
  --text-main:  #e8e4dc;   /* warm off-white, primary */
  --text-dim:   #94a3b8;   /* secondary / body dim */
  --text-muted: #64748b;   /* tertiary / labels / placeholders */
  --text-faint: #475569;   /* disabled */

  /* ---------- Phase accent colors ---------- */
  --phase-01: #c9b8ff;  /* Purple — Design Brief */
  --phase-02: #7dd3fc;  /* Blue   — Storyboard Prompts */
  --phase-03: #fdba74;  /* Orange — Higgsfield Config */
  --phase-04: #6ee7b7;  /* Green  — Tech Flat Prompts */
  --phase-05: #f87171;  /* Red    — Pattern SVG */

  /* Tinted backgrounds (12% opacity of accent) */
  --phase-01-tint: rgba(201, 184, 255, 0.12);
  --phase-02-tint: rgba(125, 211, 252, 0.12);
  --phase-03-tint: rgba(253, 186, 116, 0.12);
  --phase-04-tint: rgba(110, 231, 183, 0.12);
  --phase-05-tint: rgba(248, 113, 113, 0.12);

  /* Soft tints (for info/warning boxes — ~10%) */
  --phase-01-soft: rgba(201, 184, 255, 0.10);
  --phase-02-soft: rgba(125, 211, 252, 0.10);
  --phase-03-soft: rgba(253, 186, 116, 0.10);
  --phase-04-soft: rgba(110, 231, 183, 0.10);
  --phase-05-soft: rgba(248, 113, 113, 0.10);

  /* ---------- Status ---------- */
  --status-success: #6ee7b7;
  --status-warning: #fdba74;
  --status-error:   #f87171;
  --status-info:    #7dd3fc;

  /* ---------- Type families ---------- */
  --font-sans: 'DM Sans', 'Noto Sans TC', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-mono: 'DM Mono', 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* ---------- Type scale ---------- */
  --fs-micro:  9px;    /* tiny mono labels */
  --fs-label:  10px;   /* mono nav / chip labels */
  --fs-small:  11px;
  --fs-body:   13px;   /* default body */
  --fs-body-l: 14px;   /* long-form body / subtitle */
  --fs-prompt: 12.5px; /* prompt block content */
  --fs-h3:     17px;   /* module title */
  --fs-h2:     20px;
  --fs-h1:     24px;   /* phase title */
  --fs-display: 32px;

  /* ---------- Letter spacing ---------- */
  --ls-mono-tight:  0.10em;
  --ls-mono-label:  0.16em;
  --ls-mono-wide:   0.18em;

  /* ---------- Radii ---------- */
  --radius-sm:  6px;   /* copy button, tiny pills */
  --radius-md:  8px;   /* inputs, cards inner */
  --radius-lg:  10px;  /* CTAs, action bar */
  --radius-xl:  12px;
  --radius-pill: 999px; /* chips */

  /* ---------- Spacing ---------- */
  --space-1: 4px;
  --space-2: 6px;
  --space-3: 8px;
  --space-4: 10px;
  --space-5: 12px;
  --space-6: 16px;
  --space-7: 20px;
  --space-8: 24px;
  --space-9: 32px;
  --space-10: 40px;

  /* ---------- Layout constants ---------- */
  --header-h:  52px;
  --content-max: 820px;

  /* ---------- Borders / accents ---------- */
  --accent-bar: 3px;   /* left-border accent on cards */

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 0.15s;
  --dur-mid:  0.25s;
  --dur-slow: 0.4s;

  /* ---------- Shadows (subtle in dark UI) ---------- */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.5);
  --shadow-glow-purple: 0 0 24px rgba(201, 184, 255, 0.18);
}

/* ============================================================
   SEMANTIC TYPE STYLES
   Apply to elements directly or via composition
   ============================================================ */

html, body {
  background: var(--bg-base);
  color: var(--text-main);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.t-h1 {
  font-family: var(--font-sans);
  font-size: var(--fs-h1);
  font-weight: 800;
  line-height: 1.2;
  color: #fff;
  letter-spacing: -0.01em;
}

.t-h2 {
  font-family: var(--font-sans);
  font-size: var(--fs-h2);
  font-weight: 800;
  line-height: 1.25;
  color: #fff;
}

.t-h3 {
  font-family: var(--font-sans);
  font-size: var(--fs-h3);
  font-weight: 800;
  line-height: 1.3;
  color: #fff;
}

.t-body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.55;
  color: var(--text-main);
}

.t-body-dim {
  font-family: var(--font-sans);
  font-size: var(--fs-body-l);
  line-height: 1.6;
  color: var(--text-dim);
}

.t-prompt {
  font-family: var(--font-sans);
  font-size: var(--fs-prompt);
  line-height: 1.65;
  color: var(--text-dim);
  white-space: pre-wrap;
}

.t-mono-label {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 400;
  letter-spacing: var(--ls-mono-label);
  text-transform: uppercase;
  color: var(--text-muted);
}

.t-mono-nav {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-mono-tight);
  text-transform: uppercase;
}

.t-mono-phase {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-mono-wide);
  text-transform: uppercase;
}

.t-mono-mini {
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: var(--ls-mono-label);
  text-transform: uppercase;
  color: var(--text-muted);
}