/* ============================================================
   ATTIO DESIGN SYSTEM — TOKENS
   Sourced from attio.com CSS (Apr 2026) — kept faithful.
   ============================================================ */

:root {
  /* ---------- Neutral scale: BLACK (text / dark surfaces) ---------- */
  --black-0:   #000000;
  --black-50:  #101113;
  --black-100: #1c1d1f;   /* brand black — primary text, logo */
  --black-200: #202124;
  --black-300: #232529;
  --black-400: #2e3238;
  --black-500: #383e47;
  --black-600: #505967;
  --black-700: #6f7988;
  --black-800: #8f99a8;
  --black-900: #a4adba;

  /* ---------- Neutral scale: WHITE (backgrounds / light surfaces) ---------- */
  --white-100: #ffffff;
  --white-200: #fafafb;   /* page background */
  --white-300: #f3f4f6;
  --white-400: #edeff3;
  --white-500: #e4e7ec;   /* default stroke */
  --white-600: #dee2e7;
  --white-700: #d3d8df;
  --white-800: #cad0d9;
  --white-900: #b5bdc9;

  /* ---------- Brand Blue (primary accent) ---------- */
  --blue-100: #e8f0ff;
  --blue-200: #c8dcff;
  --blue-300: #94b9ff;
  --blue-400: #709ff5;
  --blue-450: #538bf3;
  --blue-500: #266df0;   /* primary blue */
  --blue-600: #245bc2;

  /* ---------- Semantic hues ---------- */
  --green-500: #0fc27b;
  --green-600: #0db472;

  --red-500:   #ff5b59;
  --red-600:   #f65351;

  --yellow-500: #f5b900;
  --yellow-600: #dba601;

  /* ---------- Semantic aliases (light theme default) ---------- */
  --color-page-bg:           var(--white-200);
  --color-surface:           var(--white-100);
  --color-surface-raised:    var(--white-100);
  --color-surface-sunken:    var(--white-300);
  --color-surface-hover:     var(--white-300);
  --color-surface-inverse:   var(--black-100);

  --color-stroke-subtle:     var(--white-400);
  --color-stroke-default:    var(--white-500);
  --color-stroke-strong:     var(--white-700);
  --color-stroke-focus:      var(--blue-500);

  --color-text-primary:      var(--black-100);   /* #1c1d1f */
  --color-text-secondary:    var(--black-500);   /* #383e47 */
  --color-text-tertiary:     var(--black-600);   /* #505967 */
  --color-text-muted:        var(--black-700);   /* #6f7988 */
  --color-text-subtle:       var(--black-800);   /* #8f99a8 */
  --color-text-inverse:      var(--white-100);
  --color-text-link:         var(--blue-500);

  --color-accent:            var(--blue-500);
  --color-accent-hover:      var(--blue-600);
  --color-accent-soft-bg:    var(--blue-100);
  --color-accent-soft-border:var(--blue-200);

  --color-success-fg:        var(--green-600);
  --color-success-bg:        #e6f8f0;
  --color-success-border:    #b6ebd3;

  --color-warn-fg:            #9a6b00;
  --color-warn-bg:            #fff4d6;
  --color-warn-border:        #f6e0a0;

  --color-danger-fg:          var(--red-600);
  --color-danger-bg:          #ffe9e8;
  --color-danger-border:      #ffc4c2;

  /* ---------- Typography ---------- */
  --font-display: 'Inter Display', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-sans:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-serif:   'Tiempos Text', 'Source Serif Pro', Georgia, 'Times New Roman', serif;
  --font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* Type scale — mirrors Attio's --text-* tokens (rem-based) */
  --text-xs:          0.75rem;    /* 12px */
  --text-sm:          0.875rem;   /* 14px */
  --text-base:        1rem;       /* 16px */
  --text-lg:          1.125rem;   /* 18px */
  --text-xl:          1.25rem;    /* 20px */
  --text-2xl:         1.5rem;     /* 24px */
  --text-heading-xs:  1.75rem;    /* 28px */
  --text-heading-sm:  2rem;       /* 32px */
  --text-heading-md:  2.5rem;     /* 40px */
  --text-heading-lg:  3.5rem;     /* 56px */
  --text-heading-xl:  4rem;       /* 64px */

  /* matching line-heights */
  --lh-xs:          1.125rem;
  --lh-sm:          1.25rem;
  --lh-base:        1.375rem;
  --lh-lg:          1.5rem;
  --lh-xl:          1.625rem;
  --lh-2xl:         1.875rem;
  --lh-heading-xs:  2.125rem;
  --lh-heading-sm:  2.375rem;
  --lh-heading-md:  2.75rem;
  --lh-heading-lg:  3.75rem;
  --lh-heading-xl:  4rem;

  /* letter-spacing (all slightly tight — Attio signature) */
  --ls-0:     0;
  --ls-xs:    -0.005em;
  --ls-sm:    -0.01em;
  --ls-md:    -0.015em;
  --ls-lg:    -0.02em;
  --ls-caps:  0.04em;

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

  /* ---------- Radii — direct copy of Attio scale ---------- */
  --radius-xs:  0.125rem;   /* 2px  */
  --radius-sm:  0.25rem;    /* 4px  */
  --radius-md:  0.375rem;   /* 6px  */
  --radius-lg:  0.5rem;     /* 8px  */
  --radius-xl:  0.75rem;    /* 12px */
  --radius-2xl: 1rem;       /* 16px */
  --radius-3xl: 1.25rem;    /* 20px */
  --radius-pill: 9999px;

  /* ---------- Elevation — Attio's signature ultra-soft shadows ---------- */
  --shadow-layer-1: 0px 1px 3px 0px rgba(0, 0, 0, 0.01);
  --shadow-layer-2: 0px 2px 4px -1px rgba(0, 0, 0, 0.02);
  --shadow-layer-3: 0px 4px 8px -2px rgba(0, 0, 0, 0.03);
  --shadow-layer-4: 0px 8px 16px -4px rgba(0, 0, 0, 0.04);
  --shadow-layer-5: 0px 16px 32px -8px rgba(0, 0, 0, 0.05);
  --shadow-layer-6: 0px 32px 64px -16px rgba(0, 0, 0, 0.06);
  --shadow-layer-7: 0px 64px 128px -32px rgba(0, 0, 0, 0.07);

  /* Stacked shadow for cards/menus — same feel as Attio UI chrome */
  --shadow-card: var(--shadow-layer-1), var(--shadow-layer-3);
  --shadow-popover: var(--shadow-layer-2), var(--shadow-layer-5);
  --shadow-modal: var(--shadow-layer-3), var(--shadow-layer-6), var(--shadow-layer-7);

  --ring-focus: 0 0 0 3px rgba(38, 109, 240, 0.22);

  /* ---------- Motion ---------- */
  --ease-out:    cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 320ms;

  /* ---------- Container ---------- */
  --container-sm: 640px;
  --container-md: 880px;
  --container-lg: 1120px;
  --container-xl: 1280px;
}

/* -------- Optional dark mode token remap (Attio has a dark mode too) -------- */
[data-theme="dark"] {
  --color-page-bg:        var(--black-50);
  --color-surface:        var(--black-100);
  --color-surface-raised: var(--black-200);
  --color-surface-sunken: var(--black-50);
  --color-surface-hover:  var(--black-300);

  --color-stroke-subtle:  var(--black-300);
  --color-stroke-default: var(--black-400);
  --color-stroke-strong:  var(--black-500);

  --color-text-primary:   var(--white-100);
  --color-text-secondary: var(--white-700);
  --color-text-tertiary:  var(--white-800);
  --color-text-muted:     var(--white-900);
  --color-text-subtle:    var(--black-800);
  --color-text-inverse:   var(--black-100);

  --color-accent-soft-bg: rgba(38, 109, 240, 0.14);
  --color-accent-soft-border: rgba(38, 109, 240, 0.32);

  --shadow-card:    0 1px 2px rgba(0,0,0,0.4), 0 4px 10px rgba(0,0,0,0.35);
  --shadow-popover: 0 8px 24px rgba(0,0,0,0.5);
  --shadow-modal:   0 24px 64px rgba(0,0,0,0.65);
}