/* ============================================================
   LOOM Design System — Tokens
   Single source of truth for colors, type, spacing, radius, shadow.
   ============================================================ */

/* ---------- FONTS ---------- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&family=Roboto:wght@100;300;400;500;700;900&family=Montserrat:wght@100;200;300;400;500;600;700;800;900&family=Open+Sans:wght@300;400;500;600;700;800&display=swap');

/* ============================================================
   BRAND THEMES (8) — overridden by [data-theme] on :root
   ============================================================ */

:root,
:root[data-theme="loom"] {
  --brand-100: #D6E9FF;
  --brand-100-a50: rgba(214, 233, 255, 0.5);
  --brand-300: #7AB8FF;
  --brand-500: #258CF4;
  --brand-700: #005EB8;
}
:root[data-theme="orange"] {
  --brand-100: #FFEACB;
  --brand-100-a50: rgba(255, 234, 203, 0.5);
  --brand-300: #FFB266;
  --brand-500: #FF5E00;
  --brand-700: #B72D00;
}
:root[data-theme="yellow"] {
  --brand-100: #FFF5D6;
  --brand-100-a50: rgba(255, 245, 214, 0.5);
  --brand-300: #FFE799;
  --brand-500: #F5BC00;
  --brand-700: #A37D00;
}
:root[data-theme="green"] {
  --brand-100: #DCF9E7;
  --brand-100-a50: rgba(220, 249, 231, 0.5);
  --brand-300: #A8F0C2;
  --brand-500: #25D366;
  --brand-700: #1C9C4B;
}
:root[data-theme="blue"] {
  --brand-100: #D6F4FF;
  --brand-100-a50: rgba(214, 244, 255, 0.5);
  --brand-300: #99E4FF;
  --brand-500: #00AFF0;
  --brand-700: #0078A3;
}
:root[data-theme="red"] {
  --brand-100: #FBE1DA;
  --brand-100-a50: rgba(251, 225, 218, 0.5);
  --brand-300: #F5B53A;
  --brand-500: #E14318;
  --brand-700: #A63211;
}
:root[data-theme="pink"] {
  --brand-100: #FFD6F1;
  --brand-100-a50: rgba(255, 214, 241, 0.5);
  --brand-300: #FF99DD;
  --brand-500: #FF00A9;
  --brand-700: #B8007A;
}
:root[data-theme="purple"] {
  --brand-100: #FFD6FF;
  --brand-100-a50: rgba(255, 214, 255, 0.5);
  --brand-300: #FF99FF;
  --brand-500: #800080;
  --brand-700: #520052;
}

/* ============================================================
   GRAYS — LIGHT MODE (default)
   ============================================================ */
:root {
  /* grayMain2c — text hierarchy + surfaces */
  --grayMain2c-900: #0F1A2E;
  --grayMain2c-800: #22334D;
  --grayMain2c-700: #364860;
  --grayMain2c-600: #4E6074;
  --grayMain2c-500: #6C7A87;
  --grayMain2c-400: #9AABB5;
  --grayMain2c-300: #C0D1D9;
  --grayMain2c-200: #DFECF2;
  --grayMain2c-100: #EEF6F8;

  /* generic gray — forms, buttons */
  --gray-50:  #FAFAFA;
  --gray-100: #F7F7F7;
  --gray-200: #EDEDED;
  --gray-300: #C9C9C9;
  --gray-400: #949494;
  --gray-500: #4E4E4E;
  --gray-900: #080808;

  /* base */
  --background: #FFFFFF;
  --foreground: #000000;
  --button-icon-white: #FFFFFF;

  /* shadow */
  --shadow-xs: 0 1px 2px rgba(15,26,46,0.04);
  --shadow-sm: 0 1px 3px rgba(15,26,46,0.08), 0 1px 2px rgba(15,26,46,0.04);
  --shadow-md: 0 4px 6px rgba(15,26,46,0.08), 0 2px 4px rgba(15,26,46,0.04);
  --shadow-lg: 0 10px 15px rgba(15,26,46,0.10), 0 4px 6px rgba(15,26,46,0.04);
  --shadow-xl: 0 20px 25px rgba(15,26,46,0.12), 0 10px 10px rgba(15,26,46,0.04);

  /* overlay */
  --overlay: rgba(0, 0, 0, 0.4);
}

/* ============================================================
   GRAYS — DARK MODE
   ============================================================ */
:root[data-mode="dark"] {
  --grayMain2c-900: #F2F4F7;
  --grayMain2c-800: #EAEFF2;
  --grayMain2c-700: #D1D9E0;
  --grayMain2c-600: #B2BDC7;
  --grayMain2c-500: #949EA8;
  --grayMain2c-400: #707A84;
  --grayMain2c-300: #525A61;
  --grayMain2c-200: #383D45;
  --grayMain2c-100: #262A30;

  --gray-50:  #1F1F1F;
  --gray-100: #262626;
  --gray-200: #333333;
  --gray-300: #474747;
  --gray-400: #8C8C8C;
  --gray-500: #B3B3B3;
  --gray-900: #F2F2F2;

  --background: #1A1A1A;
  --foreground: #FFFFFF;

  --shadow-xs: 0 1px 2px rgba(0,0,0,0.30);
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.40), 0 1px 2px rgba(0,0,0,0.30);
  --shadow-md: 0 4px 6px rgba(0,0,0,0.40), 0 2px 4px rgba(0,0,0,0.30);
  --shadow-lg: 0 10px 15px rgba(0,0,0,0.45), 0 4px 6px rgba(0,0,0,0.30);
  --shadow-xl: 0 20px 25px rgba(0,0,0,0.50), 0 10px 10px rgba(0,0,0,0.30);

  --overlay: rgba(0, 0, 0, 0.6);
}

/* ============================================================
   SEMANTIC / INTENT (mode-agnostic)
   ============================================================ */
:root {
  --success-200: #ACF5C1;
  --success-500: #4FAE80;
  --success-700: #377D71;

  --danger-200: #F5CCBE;
  --danger-500: #DD5F5F;
  --danger-700: #9E3548;

  --warning-600: #DBB820;
  --warning-away: #FFA645;

  --info-500: #4AA8FF;
}

/* ============================================================
   TYPOGRAPHY
   ============================================================ */
:root {
  --font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-scale: 1;

  --text-display-lg: calc(36px * var(--font-scale));
  --text-display-md: calc(28px * var(--font-scale));
  --text-display-sm: calc(22px * var(--font-scale));
  --text-heading-lg: calc(18px * var(--font-scale));
  --text-heading-md: calc(16px * var(--font-scale));
  --text-body-lg:    calc(16px * var(--font-scale));
  --text-body-md:    calc(15px * var(--font-scale));
  --text-body-sm:    calc(14px * var(--font-scale));
  --text-label:      calc(13px * var(--font-scale));
  --text-caption:    calc(12px * var(--font-scale));
  --text-tiny:       calc(11px * var(--font-scale));

  --lh-display: 1.2;
  --lh-heading: 1.3;
  --lh-body:    1.5;
  --lh-label:   1.4;
}

:root[data-font="roboto"]      { --font-family: 'Roboto', system-ui, sans-serif; }
:root[data-font="montserrat"]  { --font-family: 'Montserrat', system-ui, sans-serif; }
:root[data-font="opensans"]    { --font-family: 'Open Sans', system-ui, sans-serif; }

/* ============================================================
   SPACING — 8-point grid (expressed in 4px steps)
   ============================================================ */
:root {
  --space-0:  0px;
  --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;
}

/* ============================================================
   RADIUS
   ============================================================ */
:root {
  --radius-none: 0px;
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-full: 9999px;
}

/* ============================================================
   MOTION
   ============================================================ */
:root {
  --motion-instant: 150ms;
  --motion-default: 200ms;
  --motion-modal:   300ms;
  --motion-large:   500ms;
  --ease-default:   cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:       cubic-bezier(0, 0, 0.2, 1);
  --ease-in:        cubic-bezier(0.4, 0, 1, 1);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-instant: 0.01ms;
    --motion-default: 0.01ms;
    --motion-modal:   0.01ms;
    --motion-large:   0.01ms;
  }
}

/* ============================================================
   DENSITY
   ============================================================ */
:root {
  --row-height: 56px;
  --row-pad-y:  12px;
}
:root[data-density="compact"] {
  --row-height: 44px;
  --row-pad-y:  8px;
}

/* ============================================================
   BASE RESET + GLOBAL
   ============================================================ */
* { box-sizing: border-box; }
html, body {
  margin: 0;
  padding: 0;
  font-family: var(--font-family);
  font-size: var(--text-body-md);
  line-height: var(--lh-body);
  color: var(--grayMain2c-800);
  background: var(--gray-50);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body { transition: background var(--motion-default) var(--ease-default), color var(--motion-default) var(--ease-default); }

::selection { background: var(--brand-100); color: var(--grayMain2c-900); }

:focus-visible {
  outline: 2px solid var(--brand-500);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}