/* ============================================
   TRUBA — Design Tokens
   Aesthetic: Premium Operations
   ============================================ */

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('/fonts/manrope-300.ttf') format('truetype');
}

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/manrope-400.ttf') format('truetype');
}

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/manrope-500.ttf') format('truetype');
}

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/manrope-600.ttf') format('truetype');
}

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/manrope-700.ttf') format('truetype');
}

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('/fonts/manrope-800.ttf') format('truetype');
}

@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('/fonts/dmsans-300.ttf') format('truetype');
}

@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/dmsans-400.ttf') format('truetype');
}

@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/dmsans-500.ttf') format('truetype');
}

@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/dmsans-600.ttf') format('truetype');
}

@font-face {
  font-family: 'DM Sans';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/dmsans-400-italic.ttf') format('truetype');
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/jetbrainsmono-400.ttf') format('truetype');
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/jetbrainsmono-500.ttf') format('truetype');
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/jetbrainsmono-600.ttf') format('truetype');
}

@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/sora-500.ttf') format('truetype');
}

@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/sora-600.ttf') format('truetype');
}

@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/sora-700.ttf') format('truetype');
}

@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('/fonts/sora-800.ttf') format('truetype');
}

:root {
  /* ── Primary palette ─────────────────────── */
  --primary-50:  #f8fafc;
  --primary-100: #f1f5f9;
  --primary-200: #e2e8f0;
  --primary-300: #cbd5e1;
  --primary-400: #94a3b8;
  --primary-500: #64748b;
  --primary-600: #334155;
  --primary-700: #1f2937;
  --primary-800: #111827;
  --primary-900: #0f172a;

  --primary:        #111827;
  --primary-hover:  #0f172a;
  --primary-light:  #f3f4f6;
  --primary-ghost:  rgba(17, 24, 39, 0.08);

  /* ── Accent — neutral graphite ───────────── */
  --accent:       #4b5563;
  --accent-light: #eef2f7;
  --accent-hover: #374151;
  --accent-strong: #1f2937;

  /* ── Semantic colors ─────────────────────── */
  --success:       #1b9c67;
  --success-light: #e8f7f0;
  --success-muted: #9fdcc1;

  --warning:       #cf7a37;
  --warning-light: #fff3e8;
  --warning-muted: #f1c298;

  --danger:        #d64545;
  --danger-light:  #fff1f1;
  --danger-muted:  #f3b7b7;

  --info:          #64748b;
  --info-light:    #f1f5f9;
  --info-muted:    #cbd5e1;

  /* ── Neutrals — cool slate tint ──────────── */
  --slate-25:  #fbfcfd;
  --slate-50:  #f8fafc;
  --slate-100: #f1f5f9;
  --slate-200: #e2e8f0;
  --slate-300: #cbd5e1;
  --slate-400: #94a3b8;
  --slate-500: #64748b;
  --slate-600: #475569;
  --slate-700: #334155;
  --slate-800: #1e293b;
  --slate-900: #0f172a;
  --slate-950: #020617;

  /* Aliases for backward compatibility */
  --gray-50:  var(--slate-50);
  --gray-100: var(--slate-100);
  --gray-200: var(--slate-200);
  --gray-300: var(--slate-300);
  --gray-400: var(--slate-400);
  --gray-500: var(--slate-500);
  --gray-600: var(--slate-600);
  --gray-700: var(--slate-700);
  --gray-800: var(--slate-800);
  --gray-900: var(--slate-900);

  /* ── Surfaces ────────────────────────────── */
  --bg:         #f5f7fb;
  --bg-card:    rgba(255, 255, 255, 0.96);
  --bg-sidebar: linear-gradient(180deg, #1b2431 0%, #232d3d 100%);
  --bg-sidebar-flat: #1b2431;
  --bg-header:  rgba(248, 250, 252, 0.84);
  --bg-elevated: #ffffff;
  --surface-glass: rgba(255, 255, 255, 0.78);
  --surface-muted: rgba(248, 250, 252, 0.88);
  --hero-glow-1: rgba(52, 80, 242, 0.06);
  --hero-glow-2: rgba(18, 130, 119, 0.05);

  /* ── Text ────────────────────────────────── */
  --text:           #111827;
  --text-secondary: #4b5563;
  --text-muted:     #7c8798;
  --text-inverse:   #ffffff;
  --text-on-primary: #ffffff;

  /* ── Borders ─────────────────────────────── */
  --border:        #e4e7ec;
  --border-light:  #eff2f6;
  --border-strong: #c9d0da;
  --border-focus:  #3450f2;

  /* ── Shadows — layered for depth ─────────── */
  --shadow-xs:  0 1px 2px rgba(17, 24, 39, 0.04);
  --shadow-sm:  0 2px 8px rgba(17, 24, 39, 0.05);
  --shadow:     0 10px 24px rgba(17, 24, 39, 0.06);
  --shadow-md:  0 16px 32px rgba(17, 24, 39, 0.08);
  --shadow-lg:  0 20px 40px rgba(17, 24, 39, 0.1);
  --shadow-xl:  0 28px 56px rgba(17, 24, 39, 0.12);
  --shadow-primary: 0 10px 24px rgba(52, 80, 242, 0.14);
  --shadow-danger:  0 10px 22px rgba(214, 69, 69, 0.14);
  --shadow-inset:   inset 0 1px 2px rgba(17, 24, 39, 0.05);

  /* ── Layout ──────────────────────────────── */
  --sidebar-width:     256px;
  --sidebar-collapsed: 64px;
  --header-height:     60px;

  /* ── Radii ───────────────────────────────── */
  --radius-sm: 6px;
  --radius:    12px;
  --radius-lg: 18px;
  --radius-xl: 26px;
  --radius-full: 9999px;

  /* ── Typography ──────────────────────────── */
  --font-display: 'Manrope', system-ui, sans-serif;
  --font:         'DM Sans', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', 'Fira Code', 'Consolas', monospace;

  --font-size-2xs: 0.6875rem;  /* 11px */
  --font-size-xs:  0.75rem;    /* 12px */
  --font-size-sm:  0.8125rem;  /* 13px */
  --font-size-base: 0.875rem;  /* 14px */
  --font-size-md:  0.9375rem;  /* 15px */
  --font-size-lg:  1.0625rem;  /* 17px */
  --font-size-xl:  1.25rem;    /* 20px */
  --font-size-2xl: 1.5rem;     /* 24px */
  --font-size-3xl: 1.875rem;   /* 30px */

  --leading-tight:  1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;

  /* ── Motion ──────────────────────────────── */
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  --duration-fast:   120ms;
  --duration:        200ms;
  --duration-slow:   350ms;
  --duration-slower: 500ms;

  --transition:      200ms cubic-bezier(0.16, 1, 0.3, 1);
  --transition-fast: 120ms cubic-bezier(0.16, 1, 0.3, 1);
  --transition-slow: 350ms cubic-bezier(0.16, 1, 0.3, 1);
}

body[data-theme="dark"] {
  --primary-50:  #1a2142;
  --primary-100: #202953;
  --primary-200: #28346a;
  --primary-300: #334187;
  --primary-400: #5873ff;
  --primary-500: #7890ff;
  --primary-600: #91a5ff;
  --primary-700: #b3c0ff;
  --primary-800: #cbd5ff;
  --primary-900: #e0e7ff;

  --primary:        #7a92ff;
  --primary-hover:  #91a5ff;
  --primary-light:  rgba(122, 146, 255, 0.16);
  --primary-ghost:  rgba(122, 146, 255, 0.14);

  --accent:         #d4a35a;
  --accent-light:   rgba(212, 163, 90, 0.16);
  --accent-hover:   #e1b576;
  --accent-strong:  #f0cf9c;

  --success:       #34c48c;
  --success-light: rgba(52, 196, 140, 0.14);
  --success-muted: rgba(52, 196, 140, 0.28);

  --warning:       #e3a74e;
  --warning-light: rgba(227, 167, 78, 0.14);
  --warning-muted: rgba(227, 167, 78, 0.28);

  --danger:        #ff7b7b;
  --danger-light:  rgba(255, 123, 123, 0.14);
  --danger-muted:  rgba(255, 123, 123, 0.28);

  --info:          #8aa2ff;
  --info-light:    rgba(138, 162, 255, 0.14);
  --info-muted:    rgba(138, 162, 255, 0.28);

  --bg:         #0b0d12;
  --bg-card:    rgba(19, 24, 34, 0.88);
  --bg-sidebar: linear-gradient(180deg, #090b12 0%, #0d1320 52%, #151c2b 100%);
  --bg-sidebar-flat: #090b12;
  --bg-header:  rgba(11, 13, 18, 0.76);
  --bg-elevated: #151b28;
  --surface-glass: rgba(19, 24, 34, 0.74);
  --surface-muted: rgba(19, 24, 34, 0.5);
  --hero-glow-1: rgba(122, 146, 255, 0.14);
  --hero-glow-2: rgba(212, 163, 90, 0.1);

  --text:           #f5f7fb;
  --text-secondary: #c8d0dc;
  --text-muted:     #8f9aac;
  --text-inverse:   #ffffff;
  --text-on-primary: #09111f;

  --border:        #232938;
  --border-light:  #1b2130;
  --border-strong: #344057;
  --border-focus:  #8aa2ff;

  --shadow-xs:  0 1px 2px rgba(0, 0, 0, 0.22);
  --shadow-sm:  0 8px 20px rgba(0, 0, 0, 0.26);
  --shadow:     0 16px 32px rgba(0, 0, 0, 0.32);
  --shadow-md:  0 22px 46px rgba(0, 0, 0, 0.38);
  --shadow-lg:  0 28px 64px rgba(0, 0, 0, 0.44);
  --shadow-xl:  0 36px 86px rgba(0, 0, 0, 0.5);
  --shadow-primary: 0 18px 34px rgba(122, 146, 255, 0.2);
  --shadow-danger:  0 16px 30px rgba(255, 123, 123, 0.16);
  --shadow-inset:   inset 0 1px 2px rgba(255, 255, 255, 0.03);
}