/* tokens/colors.css */
/* ONE 365 — Color tokens
   Base palette sampled from brand mark (wrench/gear/lightning icon + wordmark),
   extended into full ramps for UI use. */

:root {
  /* ---- Base: Ink (navy-black, from wordmark) ---- */
  --ink-950: #10121a;
  --ink-900: #171a24;   /* wordmark color */
  --ink-800: #20232f;
  --ink-700: #2b2f3d;
  --ink-600: #3c4152;
  --ink-500: #565c70;
  --ink-400: #767c90;
  --ink-300: #9aa0b3;
  --ink-200: #c2c6d3;
  --ink-100: #e2e4ea;
  --ink-50:  #f2f3f6;

  /* ---- Base: Brand flame (orange → red gradient from gear) ---- */
  --flame-700: #8f1712;
  --flame-600: #c8161a;
  --flame-500: #e9560d;   /* primary brand orange */
  --flame-400: #f47b33;
  --flame-300: #f9a05f;
  --flame-200: #fcc59a;
  --flame-100: #fde6d3;

  /* ---- Base: paper (neutrals/backgrounds) ---- */
  --paper-0: #ffffff;
  --paper-50: #faf9f7;
  --paper-100: #f3f1ed;
  --paper-200: #e8e5df;
  --paper-300: #d6d2c9;

  /* ---- Semantic: text ---- */
  --text-primary: var(--ink-900);
  --text-secondary: var(--ink-500);
  --text-tertiary: var(--ink-300);
  --text-on-brand: #ffffff;
  --text-on-dark: #ffffff;
  --text-link: var(--flame-600);

  /* ---- Semantic: surfaces ---- */
  --surface-page: var(--paper-50);
  --surface-card: #ffffff;
  --surface-sunken: var(--paper-100);
  --surface-dark: var(--ink-900);
  --surface-dark-raised: var(--ink-800);
  --surface-overlay: rgba(16, 18, 26, 0.56);

  /* ---- Semantic: brand ---- */
  --brand-solid: var(--flame-500);
  --brand-gradient: linear-gradient(180deg, var(--flame-500) 0%, var(--flame-600) 100%);
  --brand-gradient-diagonal: linear-gradient(135deg, var(--flame-400) 0%, var(--flame-600) 100%);
  --brand-tint: var(--flame-100);
  --brand-on-brand: #ffffff;

  /* ---- Semantic: borders ---- */
  --border-subtle: var(--paper-200);
  --border-default: var(--ink-100);
  --border-strong: var(--ink-300);
  --border-dark: rgba(255, 255, 255, 0.12);
  --border-focus: var(--flame-500);

  /* ---- Semantic: status ---- */
  --status-success-fg: #1a7a44;
  --status-success-bg: #e5f5ea;
  --status-warning-fg: #9a5b00;
  --status-warning-bg: #fdf1dc;
  --status-danger-fg: #b91c1c;
  --status-danger-bg: #fdeaea;
  --status-info-fg: #2358a8;
  --status-info-bg: #e8f0fc;

  /* ---- Interaction states ---- */
  --state-hover-overlay: rgba(16, 18, 26, 0.06);
  --state-active-overlay: rgba(16, 18, 26, 0.12);
  --state-hover-on-dark: rgba(255, 255, 255, 0.10);
  --state-active-on-dark: rgba(255, 255, 255, 0.18);
  --state-disabled-opacity: 0.45; /* @kind other */
}


/* tokens/typography.css */
/* ONE 365 — Type tokens
   NOTE: no font files were provided with the brand mark. The wordmark uses a
   geometric technical sans; the tagline uses a monoline hand script. Nearest
   open substitutes: Sora (headings/UI) + Inter (body) + Caveat (script accent).
   See readme.md "Fonts" for the substitution flag — ask the brand owner for
   real font files if they exist. */

:root {
  --font-display: "Sora", "Space Grotesk", ui-sans-serif, sans-serif;
  --font-body: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", monospace;
  --font-script: "Caveat", cursive; /* sparing use — tagline / accent only */

  /* Type scale (major-third-ish, tuned by hand) */
  --text-display-2xl: 700 4.25rem/1.02 var(--font-display);
  --text-display-xl:  700 3.25rem/1.05 var(--font-display);
  --text-display-lg:  700 2.5rem/1.08 var(--font-display);
  --text-display-md:  600 2rem/1.15 var(--font-display);
  --text-display-sm:  600 1.5rem/1.2 var(--font-display);

  --text-body-lg: 400 1.125rem/1.55 var(--font-body);
  --text-body-md: 400 1rem/1.55 var(--font-body);
  --text-body-sm: 400 0.875rem/1.5 var(--font-body);
  --text-body-xs: 400 0.75rem/1.4 var(--font-body);

  --text-label-lg: 600 0.9375rem/1.3 var(--font-body);
  --text-label-md: 600 0.8125rem/1.3 var(--font-body);
  --text-label-sm: 600 0.6875rem/1.2 var(--font-body);

  --tracking-tight: -0.02em;
  --tracking-normal: 0em;
  --tracking-wide: 0.04em;
  --tracking-caps: 0.08em; /* eyebrow / all-caps labels */
}


/* tokens/spacing.css */
/* ONE 365 — Spacing, radius, elevation tokens */

:root {
  /* Spacing scale — 4px base */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* Radius — mechanical/industrial brand skews small-radius, not pill-happy */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 999px;

  /* Elevation — soft, warm-neutral shadows (not pure black) */
  --shadow-xs: 0 1px 2px rgba(23, 26, 36, 0.06);
  --shadow-sm: 0 2px 6px rgba(23, 26, 36, 0.08);
  --shadow-md: 0 6px 16px rgba(23, 26, 36, 0.10);
  --shadow-lg: 0 16px 32px rgba(23, 26, 36, 0.14);
  --shadow-brand: 0 8px 20px rgba(233, 86, 13, 0.28);
  --shadow-focus-ring: 0 0 0 3px rgba(233, 86, 13, 0.28);

  /* Motion */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */
  --ease-out: cubic-bezier(0, 0, 0.2, 1); /* @kind other */
  --ease-in: cubic-bezier(0.4, 0, 1, 1); /* @kind other */
  --duration-fast: 120ms; /* @kind other */
  --duration-base: 200ms; /* @kind other */
  --duration-slow: 320ms; /* @kind other */

  /* Layout */
  --container-max: 1200px;
  --border-width: 1px;
  --border-width-thick: 2px;
}