/**
 * Verigrade Design System — tokens.css
 * Version 1.0 — April 2026
 * Veridex Advisory Ltd
 *
 * Drop this file in before any other stylesheet.
 * All component CSS must reference these tokens — never hard-code values.
 */

/* ─────────────────────────────────────────────────────────────────────────────
   BRAND PRIMITIVES
   Reference only via semantic tokens below. Do not use directly in components.
───────────────────────────────────────────────────────────────────────────── */
:root {
  --color-navy-900: #0E1F2F;
  --color-navy-800: #162D42;
  --color-navy-700: #1E3A52;
  --color-teal-600: #239DA2;
  --color-teal-500: #2FA4A9;
  --color-teal-200: #B8E4E6;
  --color-teal-100: #E8F7F8;
}

/* ─────────────────────────────────────────────────────────────────────────────
   LIGHT MODE (default)
───────────────────────────────────────────────────────────────────────────── */
:root {

  /* Backgrounds */
  --color-bg-base:    #F7F5F1;
  --color-bg-surface: #FFFFFF;
  --color-bg-subtle:  #F0EDE8;
  --color-bg-overlay: rgba(14, 31, 47, 0.52);

  /* Text */
  --color-text-primary:   #1A2530;
  --color-text-secondary: #5C6B78;
  --color-text-muted:     #8A96A2;
  --color-text-disabled:  #B8C1C9;
  --color-text-inverse:   #FFFFFF;
  --color-text-brand:     #2FA4A9;
  --color-text-link:      #2FA4A9;

  /* Borders */
  --color-border-subtle:  #EAE5DE;
  --color-border-default: #D8D2CA;
  --color-border-strong:  #B4ADA4;
  --color-border-focus:   #2FA4A9;

  /* Actions */
  --color-action-bg:           #2FA4A9;
  --color-action-bg-hover:     #239DA2;
  --color-action-fg:           #FFFFFF;
  --color-action-ghost-fg:     #2FA4A9;
  --color-action-ghost-border: #2FA4A9;

  /* Sidebar — always navy, independent of colour mode */
  --color-sidebar-bg:            #0E1F2F;
  --color-sidebar-bg-mid:        #162D42;
  --color-sidebar-border:        rgba(255, 255, 255, 0.06);
  --color-sidebar-text:          rgba(255, 255, 255, 0.55);
  --color-sidebar-text-hover:    rgba(255, 255, 255, 0.88);
  --color-sidebar-text-active:   #D7F3F4;
  --color-sidebar-active-bg:     rgba(47, 164, 169, 0.10);
  --color-sidebar-active-border: #2FA4A9;

  /* Risk Band A — Low */
  --color-risk-a-fg:     #276749;
  --color-risk-a-bg:     #EAF4EE;
  --color-risk-a-border: #C3DFD0;
  --color-risk-a-dot:    #3A9E6A;

  /* Risk Band B — Medium */
  --color-risk-b-fg:     #8A6400;
  --color-risk-b-bg:     #FBF4E3;
  --color-risk-b-border: #E5D49A;
  --color-risk-b-dot:    #C9940A;

  /* Risk Band C — High */
  --color-risk-c-fg:     #7A1E1E;
  --color-risk-c-bg:     #FBF0EF;
  --color-risk-c-border: #E8BFBB;
  --color-risk-c-dot:    #C03030;

  /* EDD — Enhanced Due Diligence */
  --color-risk-edd-fg:     #1A3A5C;
  --color-risk-edd-bg:     #E8EEF5;
  --color-risk-edd-border: #B8CEDE;
  --color-risk-edd-dot:    #2A5A8C;

  /* Semantic States */
  --color-success-fg:     #276749;
  --color-success-bg:     #EAF4EE;
  --color-success-border: #C3DFD0;

  --color-warning-fg:     #8A6400;
  --color-warning-bg:     #FBF4E3;
  --color-warning-border: #E5D49A;

  --color-danger-fg:      #7A1E1E;
  --color-danger-bg:      #FBF0EF;
  --color-danger-border:  #E8BFBB;

  --color-info-fg:        #1A3A5C;
  --color-info-bg:        #E8EEF5;
  --color-info-border:    #B8CEDE;

  /* Workflow States */
  --color-wf-pending-fg:     #7A5300;
  --color-wf-pending-bg:     rgba(240, 173, 0, 0.13);
  --color-wf-pending-border: rgba(240, 173, 0, 0.32);

  --color-wf-submitted-fg:     #1A3080;
  --color-wf-submitted-bg:     rgba(58, 91, 214, 0.10);
  --color-wf-submitted-border: rgba(58, 91, 214, 0.24);

  --color-wf-returned-fg:     #7A1E1E;
  --color-wf-returned-bg:     rgba(192, 57, 43, 0.09);
  --color-wf-returned-border: rgba(192, 57, 43, 0.22);

  --color-wf-approved-fg:     #276749;
  --color-wf-approved-bg:     rgba(39, 174, 96, 0.10);
  --color-wf-approved-border: rgba(39, 174, 96, 0.24);

  /* QA Grades */
  --color-qa-green-fg: #276749;
  --color-qa-green-bg: #EAF4EE;
  --color-qa-amber-fg: #8A6400;
  --color-qa-amber-bg: #FBF4E3;
  --color-qa-red-fg:   #7A1E1E;
  --color-qa-red-bg:   #FBF0EF;
}

/* ─────────────────────────────────────────────────────────────────────────────
   DARK MODE
   Apply [data-theme="dark"] to <html> or <body>.
   Sidebar tokens do not change — they are always navy.
───────────────────────────────────────────────────────────────────────────── */
[data-theme="dark"] {
  --color-bg-base:    #0F1923;
  --color-bg-surface: #162230;
  --color-bg-subtle:  #1C2D3E;
  --color-bg-overlay: rgba(0, 0, 0, 0.65);

  --color-text-primary:   rgba(255, 255, 255, 0.90);
  --color-text-secondary: rgba(255, 255, 255, 0.55);
  --color-text-muted:     rgba(255, 255, 255, 0.32);
  --color-text-disabled:  rgba(255, 255, 255, 0.20);

  --color-border-subtle:  rgba(255, 255, 255, 0.06);
  --color-border-default: rgba(255, 255, 255, 0.10);
  --color-border-strong:  rgba(255, 255, 255, 0.18);
}

/* ─────────────────────────────────────────────────────────────────────────────
   TYPOGRAPHY
───────────────────────────────────────────────────────────────────────────── */
:root {
  --font-brand: 'Libre Baskerville', Georgia, serif;
  --font-ui:    'IBM Plex Sans', system-ui, sans-serif;
  --font-mono:  'IBM Plex Mono', 'Courier New', monospace;

  --text-xs:      11px;
  --text-sm:      12px;
  --text-base:    14px;
  --text-md:      15px;
  --text-lg:      17px;
  --text-xl:      20px;
  --text-2xl:     26px;
  --text-3xl:     36px;
  --text-display: 48px;

  --weight-light:    300;
  --weight-normal:   400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  --leading-none:    1;
  --leading-tight:   1.25;
  --leading-snug:    1.375;
  --leading-normal:  1.5;
  --leading-relaxed: 1.625;

  --tracking-tight:  -0.02em;
  --tracking-normal:  0;
  --tracking-wide:    0.04em;
  --tracking-wider:   0.07em;
  --tracking-widest:  0.10em;
}

/* ─────────────────────────────────────────────────────────────────────────────
   SPACING
───────────────────────────────────────────────────────────────────────────── */
:root {
  --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;
  --space-20: 80px;
}

/* ─────────────────────────────────────────────────────────────────────────────
   BORDER RADIUS
───────────────────────────────────────────────────────────────────────────── */
:root {
  --radius-sm:   4px;
  --radius-md:   6px;
  --radius-lg:   10px;
  --radius-xl:   14px;
  --radius-full: 999px;
}

/* ─────────────────────────────────────────────────────────────────────────────
   ELEVATION / SHADOWS
───────────────────────────────────────────────────────────────────────────── */
:root {
  --shadow-sm: 0 1px 3px rgba(14,31,47,0.07), 0 1px 2px rgba(14,31,47,0.04);
  --shadow-md: 0 4px 16px rgba(14,31,47,0.09), 0 2px 6px rgba(14,31,47,0.05);
  --shadow-lg: 0 8px 32px rgba(14,31,47,0.13), 0 4px 12px rgba(14,31,47,0.07);
  --shadow-xl: 0 20px 60px rgba(14,31,47,0.20), 0 8px 24px rgba(14,31,47,0.10);
}

/* ─────────────────────────────────────────────────────────────────────────────
   MOTION
───────────────────────────────────────────────────────────────────────────── */
:root {
  --duration-instant:  80ms;
  --duration-fast:     150ms;
  --duration-moderate: 220ms;
  --duration-slow:     350ms;

  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-enter:    cubic-bezier(0.0, 0, 0.2, 1);
  --ease-exit:     cubic-bezier(0.4, 0, 1, 1);
  --ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);

  --transition-fast:     var(--duration-fast) var(--ease-standard);
  --transition-moderate: var(--duration-moderate) var(--ease-standard);
}

/* ─────────────────────────────────────────────────────────────────────────────
   LAYOUT
───────────────────────────────────────────────────────────────────────────── */
:root {
  --sidebar-width:       220px;
  --sidebar-width-icon:  56px;
  --topbar-height:       52px;
  --container-max:       1200px;
  --container-padding:   28px;

  --icon-xs: 12px;
  --icon-sm: 14px;
  --icon-md: 16px;
  --icon-lg: 20px;
  --icon-xl: 24px;
}

/* ─────────────────────────────────────────────────────────────────────────────
   BACKWARD-COMPATIBILITY ALIASES
   Keeps existing CSS working during migration. Remove once fully migrated.
───────────────────────────────────────────────────────────────────────────── */
:root {
  --navy:        var(--color-navy-900);
  --navy-mid:    var(--color-navy-800);
  --navy-light:  var(--color-navy-700);
  --teal:        var(--color-teal-500);
  --teal-dark:   var(--color-teal-600);
  --teal-light:  var(--color-teal-100);
  --teal-mid:    var(--color-teal-200);
  --cream:       var(--color-bg-base);
  --cream-dark:  var(--color-bg-subtle);
  --ink:         var(--color-text-primary);
  --muted:       var(--color-text-secondary);
  --border:      var(--color-border-default);
  --white:       var(--color-bg-surface);
  --sh:          var(--shadow-sm);
  --shl:         var(--shadow-lg);
  --ra:          var(--color-risk-a-fg);
  --ra-bg:       var(--color-risk-a-bg);
  --rb:          var(--color-risk-b-fg);
  --rb-bg:       var(--color-risk-b-bg);
  --rc:          var(--color-risk-c-fg);
  --rc-bg:       var(--color-risk-c-bg);
  --edd:         var(--color-risk-edd-fg);
  --edd-bg:      var(--color-risk-edd-bg);
  --sb-full:     var(--sidebar-width);
  --sb-icon:     var(--sidebar-width-icon);
  --sb-tr:       var(--transition-moderate);
}