/*
 * ═══════════════════════════════════════════════════════
 *  STARINS — Design Theme: Navy Professional (default)
 * ═══════════════════════════════════════════════════════
 *
 *  HOW TO CHANGE THE THEME
 *  ───────────────────────
 *  Every visual property — colors, radii, shadows, fonts,
 *  spacing and typography — is defined as a CSS custom
 *  property here.  To redesign the application:
 *
 *    1. Copy this file, e.g. theme-ocean.css
 *    2. Update the tokens you want to change
 *    3. In templates/base.html swap the theme <link> tag
 *
 *  Tokens are grouped into logical sections so you can
 *  quickly find and change only what you need.
 *
 *  Current theme:  Navy Professional
 *  Primary hue:    Deep steel-blue (#1d4d76)
 *  Sidebar:        Dark navy (#0b1728)
 *  Font:           Inter / Segoe UI / system-ui
 * ═══════════════════════════════════════════════════════
 */

:root {

  /* ── Primary colour scale ────────────────────────────
   *  Derived from a deep steel-blue.  primary-600 is the
   *  main interactive accent; primary-800 is the dark
   *  version used for headings / text.
   */
  --primary-950: #0d2137;
  --primary-900: #132e4e;
  --primary-800: #1d4d76;
  --primary-700: #245f8f;
  --primary-600: #2f76ad;
  --primary-500: #3f8bc4;
  --primary-400: #60a5d8;
  --primary-300: #93c5e8;
  --primary-100: #daeef8;
  --primary-50:  #f0f8fd;

  /* ── Neutral grey scale ──────────────────────────────
   *  Used for text, borders, backgrounds.
   */
  --neutral-950: #17212b;
  --neutral-900: #22303d;
  --neutral-800: #344250;
  --neutral-700: #52606d;
  --neutral-600: #66788a;
  --neutral-500: #7b8794;
  --neutral-400: #a0acb8;
  --neutral-300: #d3dce5;
  --neutral-200: #e5ebf0;
  --neutral-150: #edf1f5;
  --neutral-100: #f1f4f7;
  --neutral-50:  #f8fafc;

  /* ── Semantic status colours ─────────────────────────
   *  Keep these restrained; they carry meaning.
   */
  --success:     #16825d;
  --success-bg:  #e8f6f0;
  --success-bdr: #a3d9c4;
  --warning:     #a76712;
  --warning-bg:  #fff4df;
  --warning-bdr: #f0c674;
  --danger:      #ba3f4b;
  --danger-bg:   #fdecee;
  --danger-bdr:  #f0a8ad;
  --info:        #2878b5;
  --info-bg:     #eaf4fb;
  --info-bdr:    #9ecfe9;

  /* ── Surface and background ──────────────────────────*/
  --surface:       #ffffff;
  --surface-raised:#ffffff;
  --page-bg:       #f2f5f8;
  --border:        #e1e7ed;
  --border-strong: #c8d3dd;

  /* ── Sidebar / navigation ────────────────────────────
   *  Keep the sidebar independent of the primary colour
   *  scale so it reads clearly at all brand accent values.
   */
  --nav-bg:          #0b1728;
  --nav-bg-hover:    rgba(255,255,255,0.06);
  --nav-bg-active:   rgba(96,165,250,0.16);
  --nav-text:        #98acbc;
  --nav-text-hover:  #d0dce8;
  --nav-text-active: #ffffff;
  --nav-accent:      #60a5fa;
  --nav-label:       #4b6070;
  --nav-border:      rgba(255,255,255,0.07);
  --nav-width:       244px;

  /* ── Border radius ───────────────────────────────────*/
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 9px;
  --radius-lg: 12px;
  --radius-xl: 16px;

  /* ── Shadows ─────────────────────────────────────────
   *  Use sm for cards, md for menus, lg for modals.
   */
  --shadow-xs: 0 1px 2px rgba(16,42,67,0.05);
  --shadow-sm: 0 1px 3px rgba(16,42,67,0.07), 0 1px 2px rgba(16,42,67,0.05);
  --shadow-md: 0 4px 14px rgba(16,42,67,0.10), 0 1px 4px rgba(16,42,67,0.06);
  --shadow-lg: 0 16px 40px rgba(16,42,67,0.14), 0 4px 12px rgba(16,42,67,0.08);

  /* ── Typography ──────────────────────────────────────
   *  Inter is loaded from Google Fonts in base.html.
   *  The stack falls back safely on any platform.
   */
  --font-sans: Inter, "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: "JetBrains Mono", "Fira Code", "Consolas", monospace;

  --text-xs:   0.75rem;    /* 12px */
  --text-sm:   0.8125rem;  /* 13px */
  --text-base: 0.875rem;   /* 14px */
  --text-md:   0.9375rem;  /* 15px */
  --text-lg:   1.0625rem;  /* 17px */
  --text-xl:   1.25rem;    /* 20px */
  --text-2xl:  1.5rem;     /* 24px */

  /* ── Transitions ─────────────────────────────────────*/
  --transition-fast: 0.12s ease;
  --transition:      0.18s ease;
  --transition-slow: 0.28s ease;

  /* ── Spacing scale (4px base) ────────────────────────
   *  Use these via calc() or as reference.  Components
   *  can also reference --space-N directly.
   */
  --space-1: 0.25rem;   /* 4px  */
  --space-2: 0.5rem;    /* 8px  */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-5: 1.25rem;   /* 20px */
  --space-6: 1.5rem;    /* 24px */
  --space-8: 2rem;      /* 32px */
  --space-10: 2.5rem;   /* 40px */
  --space-12: 3rem;     /* 48px */

  /* ── Backward-compatibility aliases ─────────────────
   *  These map old token names to new ones so existing
   *  templates continue to work without changes.
   */
  --color-primary:       var(--primary-700);
  --color-primary-light: var(--primary-500);
  --color-primary-dark:  var(--primary-950);
  --color-success:       var(--success);
  --color-warning:       var(--warning);
  --color-danger:        var(--danger);
  --color-info:          var(--info);
  --color-bg:            var(--page-bg);
  --color-surface:       var(--surface);
  --color-border:        var(--border);
  --color-text:          var(--neutral-950);
  --color-text-muted:    var(--neutral-600);
  --color-shadow:        rgba(16,42,67,0.08);
  --color-bg-subtle:     var(--neutral-100);
  --color-error:         var(--danger);
  --radius:              var(--radius-md);
  --sidebar-bg:          var(--nav-bg);
  --sidebar-text:        var(--nav-text);
  --sidebar-active:      var(--nav-accent);
  --font-family:         var(--font-sans);
}