/* ============================================================
   CoreHawk Design Tokens — Growth Precision Architecture
   Single source of truth for all design values.
   Import this file first in base.html (before component CSS).
   ============================================================ */

:root {
    /* ===== COLORS ===== */
    /* Surface */
    --color-surface:          #f8f9ff;
    --color-surface-dim:      #cbdbf5;
    --color-surface-lowest:   #ffffff;
    --color-surface-low:      #eff4ff;
    --color-surface-container:#e5eeff;
    --color-surface-high:     #dce9ff;
    --color-surface-highest:  #d3e4fe;

    /* Text */
    --color-on-surface:       #0b1c30;
    --color-on-surface-var:   #434655;
    --color-outline:          #737686;
    --color-outline-var:      #c3c6d7;

    /* Primary (Royal Blue) */
    --color-primary:            #004ac6;
    --color-primary-container:  #2563eb;
    --color-on-primary:         #ffffff;
    --color-on-primary-container:#eeefff;
    --color-primary-fixed:      #dbe1ff;

    /* Secondary (Mint Green) — positive / success */
    --color-secondary:               #006c4a;
    --color-secondary-container:     #6cf8bb;
    --color-on-secondary-container:  #00714d;

    /* Tertiary (Amber) — warning / attention */
    --color-tertiary:           #784b00;
    --color-tertiary-container: #996100;

    /* Error (Red) — negative / danger */
    --color-error:           #ba1a1a;
    --color-error-container: #ffdad6;

    /* ===== TYPOGRAPHY ===== */
    --font-heading: 'Manrope', system-ui, -apple-system, sans-serif;
    --font-body:    'Inter',   system-ui, -apple-system, sans-serif;

    --text-display: 36px;
    --text-h1:      30px;
    --text-h2:      24px;
    --text-h3:      20px;
    --text-nav:     14px;
    --text-body-lg: 16px;
    --text-body-md: 14px;
    --text-meta:    12px;
    --text-label:   11px;

    /* ===== SPACING ===== */
    --space-page:   32px;
    --space-gutter: 24px;
    --space-card:   20px;
    --space-sm:     8px;
    --space-md:     16px;
    --space-lg:     24px;

    /* ===== RADIUS ===== */
    --radius-sm:   0.25rem;
    --radius:      0.5rem;
    --radius-md:   0.75rem;
    --radius-lg:   1rem;
    --radius-full: 9999px;

    /* ===== SHADOWS ===== */
    --shadow-card:  0px 1px 3px rgba(0, 0, 0, 0.04);
    --shadow-float: 0px 4px 12px rgba(0, 0, 0, 0.05);

    /* ===== LAYOUT ===== */
    --sidebar-width: 260px;
    --topbar-height: 44px;

    /* ============================================================
       BACK-COMPAT ALIASES
       Older CSS in base.html and individual templates still uses
       names like --surface, --on-surface, --primary, --bg, --text.
       Point them at the canonical tokens above so a single change
       to a color value propagates everywhere.
       ============================================================ */

    /* Surface aliases (Material-style short names) */
    --surface:           var(--color-surface);
    --surface-dim:       var(--color-surface-dim);
    --surface-lowest:    var(--color-surface-lowest);
    --surface-low:       var(--color-surface-low);
    --surface-container: var(--color-surface-container);
    --surface-high:      var(--color-surface-high);
    --surface-highest:   var(--color-surface-highest);

    --on-surface:          var(--color-on-surface);
    --on-surface-variant:  var(--color-on-surface-var);
    --outline:             var(--color-outline);
    --outline-variant:     var(--color-outline-var);

    --primary:                 var(--color-primary);
    --primary-container:       var(--color-primary-container);
    --on-primary:              var(--color-on-primary);
    --on-primary-container:    var(--color-on-primary-container);

    --secondary:                  var(--color-secondary);
    --secondary-container:        var(--color-secondary-container);
    --on-secondary-container:     var(--color-on-secondary-container);

    --tertiary:                   var(--color-tertiary);
    --tertiary-container:         var(--color-tertiary-container);

    --error:           var(--color-error);
    --error-container: var(--color-error-container);

    /* Legacy dark-era aliases — point everything at the light tokens. */
    --bg:               var(--color-surface);
    --bg-primary:       var(--color-surface);
    --bg-secondary:     var(--color-surface-lowest);
    --bg-tertiary:      var(--color-surface-low);
    --bg-hover:         var(--color-surface-container);
    --card-bg:          var(--color-surface-lowest);
    --border:           var(--color-outline-var);
    --border-color:     var(--color-outline-var);
    --text:             var(--color-on-surface);
    --text-primary:     var(--color-on-surface);
    --text-secondary:   var(--color-on-surface-var);
    --text-muted:       var(--color-outline);
    --muted:            var(--color-on-surface-var);
    --accent:           var(--color-primary);
    --accent-blue:      var(--color-primary-container);
    --green:            var(--color-secondary);
    --red:              var(--color-error);
    --yellow:           var(--color-tertiary-container);
    --card-shadow:      var(--shadow-card);

    /* Spacing aliases */
    --margin-page:  var(--space-page);
    --gutter:       var(--space-gutter);
    --padding-card: var(--space-card);
    --stack-sm:     var(--space-sm);
    --stack-md:     var(--space-md);
    --stack-lg:     var(--space-lg);
}