/* ============================================================
   Finetechnologies — Design tokens
   Reproduced from the Finetech design system (colors, typography,
   spacing, effects). Cool neutral ink ramp + single azure accent.
   ============================================================ */

/* ---- Webfonts: Geist (sans) + Geist Mono (developer accent) ---- */
@import url('https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700;800&family=Geist+Mono:wght@400;500;600&display=swap');

:root {
  /* ---- Neutrals (cool, slightly blue-tinted ink) ---- */
  --ink-950: #0A0C10;
  --ink-900: #0F131A;
  --ink-850: #151A23;
  --ink-800: #1B212C;
  --ink-700: #2A313F;
  --ink-600: #3B4453;
  --ink-500: #566072;
  --ink-400: #7B8598;
  --ink-300: #A6AFBF;
  --ink-200: #CBD1DB;
  --ink-150: #DDE2EA;
  --ink-100: #EBEEF3;
  --ink-75:  #F2F4F8;
  --ink-50:  #F8F9FB;
  --white:   #FFFFFF;

  /* ---- Accent (electric azure) ---- */
  --azure-700: #163CC4;
  --azure-600: #1F4FEB;
  --azure-500: #2F6BFF;
  --azure-400: #5C8CFF;
  --azure-300: #92B0FF;
  --azure-200: #C4D3FF;
  --azure-100: #E4EBFF;
  --azure-50:  #F1F5FF;

  /* ---- Semantic hues ---- */
  --green-600: #0E8C46;
  --green-500: #12A150;
  --green-100: #D9F5E4;
  --amber-600: #C8890F;
  --amber-500: #E8A317;
  --amber-100: #FBEFCF;
  --red-600:   #D13438;
  --red-500:   #E5484D;
  --red-100:   #FBE1E2;

  /* ---- Brand ---- */
  --brand: var(--azure-500);
  --brand-strong: var(--azure-600);
  --brand-soft: var(--azure-100);

  /* ---- Families ---- */
  --font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", "Menlo", "Consolas", monospace;

  /* ---- Weights ---- */
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-black: 800;

  /* ---- Type scale ---- */
  --fs-display-xl: 72px;
  --fs-display-lg: 56px;
  --fs-display-md: 44px;
  --fs-h1: 36px;
  --fs-h2: 28px;
  --fs-h3: 22px;
  --fs-h4: 18px;
  --fs-body-lg: 17px;
  --fs-body: 15px;
  --fs-body-sm: 13px;
  --fs-caption: 12px;
  --fs-micro: 11px;

  /* ---- Line heights ---- */
  --lh-tight: 1.05;
  --lh-snug: 1.2;
  --lh-normal: 1.5;
  --lh-relaxed: 1.65;

  /* ---- Letter spacing ---- */
  --ls-tighter: -0.03em;
  --ls-tight: -0.015em;
  --ls-normal: 0em;
  --ls-wide: 0.02em;
  --ls-wider: 0.08em;

  /* ---- Spacing (4px base grid) ---- */
  --space-0: 0;
  --space-1: 2px;
  --space-2: 4px;
  --space-3: 8px;
  --space-4: 12px;
  --space-5: 16px;
  --space-6: 20px;
  --space-7: 24px;
  --space-8: 32px;
  --space-9: 40px;
  --space-10: 48px;
  --space-11: 64px;
  --space-12: 80px;
  --space-13: 96px;
  --space-14: 128px;

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

  /* ---- Layout ---- */
  --container-max: 1200px;
  --container-narrow: 760px;
  --gutter: 24px;

  /* ---- Radius ---- */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-2xl: 28px;
  --radius-pill: 999px;

  /* ---- Shadows (light) ---- */
  --shadow-xs: 0 1px 2px rgba(10, 12, 16, 0.06);
  --shadow-sm: 0 1px 3px rgba(10, 12, 16, 0.08), 0 1px 2px rgba(10, 12, 16, 0.04);
  --shadow-md: 0 4px 12px rgba(10, 12, 16, 0.08), 0 2px 4px rgba(10, 12, 16, 0.04);
  --shadow-lg: 0 12px 32px rgba(10, 12, 16, 0.12), 0 4px 8px rgba(10, 12, 16, 0.05);
  --shadow-xl: 0 24px 64px rgba(10, 12, 16, 0.16), 0 8px 16px rgba(10, 12, 16, 0.06);
  --shadow-focus: 0 0 0 3px var(--focus-ring);

  /* ---- Motion ---- */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-emphasized: cubic-bezier(0.3, 0, 0, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --dur-instant: 80ms;
  --dur-fast: 140ms;
  --dur-base: 220ms;
  --dur-slow: 360ms;
}

/* ============================================================
   Semantic aliases — LIGHT (default)
   ============================================================ */
:root,
[data-theme="light"] {
  color-scheme: light;

  --bg-base:        var(--ink-50);
  --bg-subtle:      var(--ink-75);
  --surface-card:   var(--white);
  --surface-raised: var(--white);
  --surface-sunken: var(--ink-75);
  --surface-inset:  var(--ink-100);

  --border-subtle:  var(--ink-100);
  --border-default: var(--ink-150);
  --border-strong:  var(--ink-200);
  --border-focus:   var(--azure-500);

  --text-strong:  var(--ink-950);
  --text-body:    var(--ink-800);
  --text-muted:   var(--ink-500);
  --text-subtle:  var(--ink-400);
  --text-onbrand: var(--white);
  --text-link:    var(--azure-600);

  --accent:        var(--azure-500);
  --accent-hover:  var(--azure-600);
  --accent-press:  var(--azure-700);
  --accent-soft:   var(--azure-100);
  --accent-ontext: var(--azure-600);

  --success: var(--green-500);
  --success-soft: var(--green-100);
  --warning: var(--amber-500);
  --warning-soft: var(--amber-100);
  --danger:  var(--red-500);
  --danger-soft: var(--red-100);

  --focus-ring: color-mix(in srgb, var(--azure-500) 35%, transparent);
}

/* ============================================================
   Semantic aliases — DARK
   ============================================================ */
[data-theme="dark"] {
  color-scheme: dark;

  --bg-base:        var(--ink-950);
  --bg-subtle:      var(--ink-900);
  --surface-card:   var(--ink-900);
  --surface-raised: var(--ink-850);
  --surface-sunken: var(--ink-950);
  --surface-inset:  var(--ink-850);

  --border-subtle:  var(--ink-850);
  --border-default: var(--ink-800);
  --border-strong:  var(--ink-700);
  --border-focus:   var(--azure-400);

  --text-strong:  var(--white);
  --text-body:    var(--ink-150);
  --text-muted:   var(--ink-400);
  --text-subtle:  var(--ink-500);
  --text-onbrand: var(--white);
  --text-link:    var(--azure-300);

  --accent:        var(--azure-500);
  --accent-hover:  var(--azure-400);
  --accent-press:  var(--azure-300);
  --accent-soft:   color-mix(in srgb, var(--azure-500) 18%, transparent);
  --accent-ontext: var(--azure-300);

  --success: var(--green-500);
  --success-soft: color-mix(in srgb, var(--green-500) 18%, transparent);
  --warning: var(--amber-500);
  --warning-soft: color-mix(in srgb, var(--amber-500) 18%, transparent);
  --danger:  var(--red-500);
  --danger-soft: color-mix(in srgb, var(--red-500) 20%, transparent);

  --focus-ring: color-mix(in srgb, var(--azure-400) 45%, transparent);

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5), 0 2px 4px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.6), 0 4px 8px rgba(0, 0, 0, 0.4);
  --shadow-xl: 0 24px 64px rgba(0, 0, 0, 0.7), 0 8px 16px rgba(0, 0, 0, 0.45);
}