/* Flowdesk Design System — compiled styles */

/* ── tokens/base.css ── */
/* ============================================================
   Flowdesk — Base / reset
   Light-touch resets + element defaults wired to tokens.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: var(--leading-normal);
  color: var(--text-body);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  color: var(--text-strong);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  margin: 0;
}

p { margin: 0; }

a {
  color: var(--text-link);
  text-decoration: none;
}
a:hover { text-decoration: underline; }

code, pre, kbd {
  font-family: var(--font-mono);
  font-size: 0.9em;
}

::selection {
  background: color-mix(in srgb, var(--blue-500) 28%, transparent);
}

/* Shared focus ring */
:where(button, a, input, select, textarea, [tabindex]):focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--ring);
  border-color: var(--border-focus);
}

/* Utility: uppercase eyebrow label */
.fd-eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--brand);
}

/* ── tokens/fonts.css ── */
/* ============================================================
   Flowdesk — Fonts
   NOTE: No brand fonts were provided. These are chosen
   substitutes loaded from Google Fonts:
     - Space Grotesk  → display / headings (geometric, tech-forward)
     - Inter Tight    → body / UI text (clean, neutral, dense)
     - JetBrains Mono → code / data / metrics
   If Flowdesk has licensed brand fonts, swap the 500;600;700&family=Inter+Tight:ital,wght@0,400;0,500;0,600;0,700;1,400&family=JetBrains+Mono:wght@400;500;600&display=swap');

/* ── tokens/colors.css ── */
/* ============================================================
   Flowdesk — Color tokens
   Brand blue #38b6ff anchors a cool, tech-forward palette.
   Base scales (raw) + semantic aliases for light & dark UI.
   ============================================================ */

:root {
  /* --- Brand / primary scale (anchored on #38b6ff = 500) --- */
  --blue-50:  #eef9ff;
  --blue-100: #d8f1ff;
  --blue-200: #bce8ff;
  --blue-300: #8edcff;
  --blue-400: #59c8ff;
  --blue-500: #38b6ff;  /* brand primary */
  --blue-600: #1f97e6;
  --blue-700: #1879bd;
  --blue-800: #1a6396;
  --blue-900: #1b5279;
  --blue-950: #11324f;

  /* --- Neutral scale (cool slate, tuned toward the blue) --- */
  --slate-0:   #ffffff;
  --slate-50:  #f6f8fb;
  --slate-100: #eef2f7;
  --slate-200: #e0e7ef;
  --slate-300: #ccd6e1;
  --slate-400: #9aa8bb;
  --slate-500: #6c7b90;
  --slate-600: #4d5a6d;
  --slate-700: #374151;
  --slate-800: #232c39;
  --slate-900: #151c26;
  --slate-950: #0b1017;

  /* --- Semantic hues --- */
  --green-400: #34d39e;
  --green-500: #14b87f;
  --green-600: #0f9468;
  --amber-400: #fbbf45;
  --amber-500: #f5a524;
  --amber-600: #d98306;
  --red-400:   #f87a82;
  --red-500:   #f04550;
  --red-600:   #d6303b;

  /* ============================================================
     SEMANTIC ALIASES — default (light) theme
     Reference these in components, not the raw scales.
     ============================================================ */

  /* Brand */
  --brand:          var(--blue-500);
  --brand-hover:    var(--blue-600);
  --brand-active:   var(--blue-700);
  --brand-subtle:   var(--blue-50);
  --brand-border:   var(--blue-200);
  --on-brand:       #ffffff;

  /* Surfaces */
  --surface-page:    var(--slate-50);
  --surface-card:    var(--slate-0);
  --surface-sunken:  var(--slate-100);
  --surface-raised:  var(--slate-0);
  --surface-inverse: var(--slate-900);
  --surface-hover:   var(--slate-100);

  /* Text */
  --text-strong:   var(--slate-900);
  --text-body:     var(--slate-700);
  --text-muted:    var(--slate-500);
  --text-faint:    var(--slate-400);
  --text-on-dark:  var(--slate-100);
  --text-link:     var(--blue-600);

  /* Borders / lines */
  --border:        var(--slate-200);
  --border-strong: var(--slate-300);
  --border-focus:  var(--blue-500);
  --ring:          color-mix(in srgb, var(--blue-500) 35%, transparent);

  /* Status (foreground / subtle bg) */
  --success:       var(--green-500);
  --success-subtle:#e6f8f1;
  --warning:       var(--amber-500);
  --warning-subtle:#fef4e1;
  --danger:        var(--red-500);
  --danger-subtle: #fdecec;
  --info:          var(--blue-500);
  --info-subtle:   var(--blue-50);
}

/* ============================================================
   DARK THEME — apply on [data-theme="dark"]
   The product app surfaces default to this.
   ============================================================ */

[data-theme="dark"] {
  --brand:          var(--blue-400);
  --brand-hover:    var(--blue-300);
  --brand-active:   var(--blue-500);
  --brand-subtle:   color-mix(in srgb, var(--blue-500) 16%, var(--slate-950));
  --brand-border:   color-mix(in srgb, var(--blue-500) 32%, transparent);
  --on-brand:       #06131f;

  --surface-page:    var(--slate-950);
  --surface-card:    var(--slate-900);
  --surface-sunken:  #0e151e;
  --surface-raised:  var(--slate-800);
  --surface-inverse: var(--slate-0);
  --surface-hover:   color-mix(in srgb, var(--slate-0) 5%, transparent);

  --text-strong:   var(--slate-50);
  --text-body:     var(--slate-300);
  --text-muted:    var(--slate-400);
  --text-faint:    var(--slate-500);
  --text-on-dark:  var(--slate-100);
  --text-link:     var(--blue-300);

  --border:        color-mix(in srgb, var(--slate-0) 10%, transparent);
  --border-strong: color-mix(in srgb, var(--slate-0) 18%, transparent);
  --border-focus:  var(--blue-400);
  --ring:          color-mix(in srgb, var(--blue-400) 40%, transparent);

  --success-subtle:color-mix(in srgb, var(--green-500) 16%, var(--slate-950));
  --warning-subtle:color-mix(in srgb, var(--amber-500) 16%, var(--slate-950));
  --danger-subtle: color-mix(in srgb, var(--red-500) 16%, var(--slate-950));
  --info-subtle:   color-mix(in srgb, var(--blue-500) 16%, var(--slate-950));
}

/* ── tokens/typography.css ── */
/* ============================================================
   Flowdesk — Typography tokens
   ============================================================ */

:root {
  /* Families */
  --font-display: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
  --font-body:    'Inter Tight', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  /* Type scale (rem-based, 1rem = 16px) */
  --text-2xs: 0.6875rem;  /* 11px */
  --text-xs:  0.75rem;    /* 12px */
  --text-sm:  0.875rem;   /* 14px */
  --text-md:  1rem;       /* 16px — base */
  --text-lg:  1.125rem;   /* 18px */
  --text-xl:  1.375rem;   /* 22px */
  --text-2xl: 1.75rem;    /* 28px */
  --text-3xl: 2.25rem;    /* 36px */
  --text-4xl: 3rem;       /* 48px */
  --text-5xl: 3.75rem;    /* 60px */
  --text-6xl: 4.75rem;    /* 76px */

  /* Weights */
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semibold:600;
  --weight-bold:    700;

  /* Line heights */
  --leading-tight:  1.08;
  --leading-snug:   1.25;
  --leading-normal: 1.5;
  --leading-relaxed:1.65;

  /* Letter spacing */
  --tracking-tighter: -0.03em;
  --tracking-tight:   -0.015em;
  --tracking-normal:  0em;
  --tracking-wide:    0.02em;
  --tracking-caps:    0.08em;  /* uppercase eyebrows / labels */
}

/* ── tokens/spacing.css ── */
/* ============================================================
   Flowdesk — Spacing & sizing tokens
   4px base grid.
   ============================================================ */

:root {
  --space-0:  0;
  --space-1:  0.25rem;  /* 4 */
  --space-2:  0.5rem;   /* 8 */
  --space-3:  0.75rem;  /* 12 */
  --space-4:  1rem;     /* 16 */
  --space-5:  1.25rem;  /* 20 */
  --space-6:  1.5rem;   /* 24 */
  --space-8:  2rem;     /* 32 */
  --space-10: 2.5rem;   /* 40 */
  --space-12: 3rem;     /* 48 */
  --space-16: 4rem;     /* 64 */
  --space-20: 5rem;     /* 80 */
  --space-24: 6rem;     /* 96 */
  --space-32: 8rem;     /* 128 */

  /* Layout */
  --container-max: 1200px;
  --container-wide: 1320px;
  --gutter: var(--space-6);

  /* Control heights */
  --control-sm: 32px;
  --control-md: 40px;
  --control-lg: 48px;
}

/* ── tokens/effects.css ── */
/* ============================================================
   Flowdesk — Effects: radii, shadows, borders, motion
   ============================================================ */

:root {
  /* Corner radii — soft, modern, never pill-everything */
  --radius-xs:  4px;
  --radius-sm:  6px;
  --radius-md:  10px;
  --radius-lg:  14px;
  --radius-xl:  20px;
  --radius-2xl: 28px;
  --radius-full:999px;

  /* Borders */
  --border-width: 1px;

  /* Elevation — soft, low-spread, cool-tinted (never harsh black) */
  --shadow-xs: 0 1px 2px rgba(17, 36, 56, 0.06);
  --shadow-sm: 0 1px 2px rgba(17, 36, 56, 0.06), 0 2px 6px rgba(17, 36, 56, 0.05);
  --shadow-md: 0 2px 4px rgba(17, 36, 56, 0.05), 0 8px 20px rgba(17, 36, 56, 0.08);
  --shadow-lg: 0 8px 16px rgba(17, 36, 56, 0.08), 0 20px 44px rgba(17, 36, 56, 0.12);
  --shadow-xl: 0 24px 64px rgba(17, 36, 56, 0.18);

  /* Brand glow — for primary CTAs / focus emphasis on dark */
  --glow-brand: 0 6px 24px color-mix(in srgb, var(--blue-500) 35%, transparent);

  /* Motion — quick, confident, slight ease-out. No bounce. */
  --ease-out:   cubic-bezier(0.22, 0.61, 0.36, 1); /* @kind other */
  --ease-in-out:cubic-bezier(0.65, 0, 0.35, 1);    /* @kind other */
  --dur-fast:   120ms; /* @kind other */
  --dur-base:   180ms; /* @kind other */
  --dur-slow:   280ms; /* @kind other */
}

[data-theme="dark"] {
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4), 0 2px 6px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 2px 6px rgba(0, 0, 0, 0.4), 0 10px 28px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.5), 0 28px 64px rgba(0, 0, 0, 0.55);
  --shadow-xl: 0 32px 80px rgba(0, 0, 0, 0.6);
}