/*
 * tokens.css
 * CSS Design Token System — Bnood Industrial V1
 *
 * Source of truth: docs/02_UX_UI/UI_TOKENS.md
 * Task: B02-T01 — Create CSS Token System
 * Batch: B02 — UI Foundation & Shared Layouts
 *
 * Rules:
 * - Do not use values outside this file without Owner approval.
 * - Do not add Tailwind, Bootstrap, Sass, or any CSS framework.
 * - All component and page CSS must use these variables.
 */

:root {

  /* =========================
     Colors — Core Brand
  ========================= */

  --color-primary-950: #070A12;
  --color-primary-900: #0B0F19;
  --color-primary-850: #0F1623;
  --color-primary-800: #111827;
  --color-primary-700: #151C27;
  --color-primary-600: #1F2937;

  --color-accent-600: #E5AC00;
  --color-accent-500: #FCC424;
  --color-accent-400: #FFD65A;
  --color-accent-200: #FFEAA3;
  --color-accent-100: #FFF4C7;
  --color-accent-050: #FFF9E6;

  /* =========================
     Colors — Backgrounds
  ========================= */

  --color-bg-page: #F6F7F9;
  --color-bg-soft: #F9FAFB;
  --color-bg-white: #FFFFFF;
  --color-bg-muted: #F1F3F6;
  --color-bg-technical: #F3F5F8;
  --color-bg-dark: #0B0F19;

  /* =========================
     Colors — Text
  ========================= */

  --color-text-main: #111827;
  --color-text-heading: #0B0F19;
  --color-text-secondary: #4B5563;
  --color-text-muted: #6B7280;
  --color-text-soft: #9CA3AF;
  --color-text-disabled: #A7B0BE;
  --color-text-inverted: #FFFFFF;
  --color-text-inverted-muted: rgba(255, 255, 255, 0.72);

  /* =========================
     Colors — Borders
  ========================= */

  --color-border-soft: #E6EAF0;
  --color-border-default: #DDE3EA;
  --color-border-strong: #CBD5E1;
  --color-border-dark-soft: rgba(255, 255, 255, 0.10);
  --color-border-accent: rgba(252, 196, 36, 0.45);

  /* =========================
     Colors — Status
  ========================= */

  --color-success: #168A5B;
  --color-success-soft: #E6F6EF;

  --color-warning: #B7791F;
  --color-warning-soft: #FFF7E0;

  --color-danger: #C92A2A;
  --color-danger-soft: #FDECEC;

  --color-info: #2563EB;
  --color-info-soft: #EAF1FF;

  /* =========================
     Colors — Neutral Scale
  ========================= */

  --color-neutral-50:  #F9FAFB;
  --color-neutral-100: #F1F3F6;
  --color-neutral-200: #E6EAF0;
  --color-neutral-300: #DDE3EA;
  --color-neutral-400: #CBD5E1;
  --color-neutral-500: #9CA3AF;
  --color-neutral-600: #6B7280;
  --color-neutral-700: #4B5563;
  --color-neutral-800: #1F2937;
  --color-neutral-900: #111827;

  /* =========================
     Colors — Chart (muted palette)
  ========================= */

  --color-chart-primary: #0B0F19;
  --color-chart-accent:  #FCC424;
  --color-chart-muted:   #DDE3EA;
  --color-chart-success: #168A5B;
  --color-chart-teal:    #8FC9BC;
  --color-chart-blue:    #8EA7D8;
  --color-chart-purple:  #A78BFA;

  /* =========================
     Typography — Families
  ========================= */

  --font-family-base: "Cairo", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-family-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;

  /* =========================
     Typography — Weights
  ========================= */

  --font-weight-regular:   400;
  --font-weight-medium:    500;
  --font-weight-semibold:  600;
  --font-weight-bold:      700;
  --font-weight-extrabold: 800;

  /* =========================
     Font Sizes — Desktop
  ========================= */

  --font-hero:            56px;
  --font-page-title:      48px;
  --font-section-title:   36px;
  --font-subsection-title:28px;
  --font-card-title:      22px;
  --font-body-lg:         18px;
  --font-body:            16px;
  --font-body-sm:         14px;
  --font-caption:         13px;
  --font-micro:           12px;

  /* =========================
     Font Sizes — Mobile
  ========================= */

  --font-hero-mobile:         34px;
  --font-page-title-mobile:   32px;
  --font-section-title-mobile:26px;
  --font-card-title-mobile:   18px;
  --font-body-mobile:         15px;
  --font-body-sm-mobile:      13px;

  /* =========================
     Line Heights
  ========================= */

  --line-tight:      1.08;
  --line-heading:    1.18;
  --line-title:      1.25;
  --line-card:       1.35;
  --line-body:       1.75;
  --line-body-loose: 1.8;
  --line-small:      1.6;

  /* =========================
     Letter Spacing
  ========================= */

  --tracking-hero:    -0.8px;
  --tracking-title:   -0.6px;
  --tracking-section: -0.4px;
  --tracking-normal:   0px;
  --tracking-code:     0.2px;

  /* =========================
     Spacing Scale
  ========================= */

  --space-0:   0px;
  --space-2:   2px;
  --space-4:   4px;
  --space-6:   6px;
  --space-8:   8px;
  --space-10:  10px;
  --space-12:  12px;
  --space-14:  14px;
  --space-16:  16px;
  --space-18:  18px;
  --space-20:  20px;
  --space-24:  24px;
  --space-28:  28px;
  --space-32:  32px;
  --space-36:  36px;
  --space-40:  40px;
  --space-48:  48px;
  --space-56:  56px;
  --space-64:  64px;
  --space-72:  72px;
  --space-80:  80px;
  --space-96:  96px;
  --space-120: 120px;

  /* =========================
     Containers
  ========================= */

  --container-narrow:  920px;
  --container-default: 1180px;
  --container-wide:    1280px;

  --container-padding-desktop:   32px;
  --container-padding-tablet:    24px;
  --container-padding-mobile:    16px;
  --container-padding-mobile-sm: 14px;

  /* =========================
     Section Spacing
  ========================= */

  --section-y-desktop: 80px;
  --section-y-tablet:  64px;
  --section-y-mobile:  48px;

  --section-y-compact-desktop: 56px;
  --section-y-compact-mobile:  40px;

  --hero-y-desktop: 96px;
  --hero-y-tablet:  72px;
  --hero-y-mobile:  56px;

  /* =========================
     Radius Scale
  ========================= */

  --radius-0:    0px;
  --radius-6:    6px;
  --radius-8:    8px;
  --radius-10:   10px;
  --radius-12:   12px;
  --radius-14:   14px;
  --radius-16:   16px;
  --radius-18:   18px;
  --radius-20:   20px;
  --radius-24:   24px;
  --radius-pill: 999px;

  /* Semantic radius aliases */
  --radius-button:         12px;
  --radius-button-sm:      10px;
  --radius-input:          10px;
  --radius-card:           16px;
  --radius-card-sm:        14px;
  --radius-card-lg:        20px;
  --radius-section:        24px;
  --radius-dashboard-card: 18px;

  /* =========================
     Shadows
  ========================= */

  --shadow-none: none;

  --shadow-subtle:
    0 1px 2px rgba(15, 23, 42, 0.04);

  --shadow-surface:
    0 4px 14px rgba(15, 23, 42, 0.04);

  --shadow-card:
    0 8px 24px rgba(15, 23, 42, 0.06);

  --shadow-card-hover:
    0 14px 34px rgba(15, 23, 42, 0.09);

  --shadow-dashboard-card:
    0 6px 20px rgba(15, 23, 42, 0.05);

  --shadow-dashboard-hover:
    0 10px 28px rgba(15, 23, 42, 0.075);

  --shadow-floating:
    0 18px 44px rgba(15, 23, 42, 0.12);

  --shadow-modal:
    0 24px 60px rgba(15, 23, 42, 0.16);

  --shadow-header:
    0 8px 24px rgba(15, 23, 42, 0.07);

  --shadow-admin-drawer:
    -18px 0 44px rgba(15, 23, 42, 0.18);

  /* =========================
     Borders (shorthand)
  ========================= */

  --border-soft:      1px solid #E6EAF0;
  --border-default:   1px solid #DDE3EA;
  --border-strong:    1px solid #CBD5E1;
  --border-dark-soft: 1px solid rgba(255, 255, 255, 0.10);
  --border-accent:    1px solid rgba(252, 196, 36, 0.45);

  /* =========================
     Motion
  ========================= */

  --duration-instant:     80ms;
  --duration-fast:       150ms;
  --duration-normal:     180ms;
  --duration-medium:     220ms;
  --duration-slow:       250ms;
  --duration-reveal-max: 320ms;

  --ease-standard: ease;
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:   cubic-bezier(0.4, 0, 0.2, 1);

  --hover-lift-button:   -1px;
  --hover-lift-card:     -2px;
  --hover-lift-card-max: -4px;

  /* =========================
     Z-index Scale
  ========================= */

  --z-base:            1;
  --z-dropdown:       20;
  --z-sticky:         50;
  --z-admin-sidebar:  60;
  --z-admin-drawer:  100;
  --z-modal-backdrop:200;
  --z-modal:         220;
  --z-toast:         300;

  /* =========================
     Layout Heights
  ========================= */

  --header-height-desktop: 76px;
  --header-height-mobile:  64px;

  --admin-sidebar-width: 280px;
  --admin-topbar-height: 64px;

  /* =========================
     Breakpoints (reference values — use in @media queries)
  ========================= */

  --breakpoint-sm: 480px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;

  /* =========================
     Focus Rings
  ========================= */

  --focus-ring:      0 0 0 3px rgba(252, 196, 36, 0.35);
  --focus-ring-soft: 0 0 0 3px rgba(252, 196, 36, 0.24);

}