/* =========================================================
   ORDER OF THE ARROW — BRAND THEME
   Official OA palette

   OFFICIAL BRAND COLORS
   White       #FFFFFF
   Grey        #36454F
   Red         #E31837
   Dark Red    #640813
   Light Grey  #E6E7E8
   Black       #030006
   Blue        #005596
========================================================= */

:root {

  /* =======================================================
     01. OFFICIAL OA BRAND PALETTE
     These are the authoritative brand color values.
  ======================================================= */

  --oa-white:      #FFFFFF;
  --oa-grey:       #36454F;
  --oa-red:        #E31837;
  --oa-dark-red:   #640813;
  --oa-light-grey: #E6E7E8;
  --oa-black:      #030006;
  --oa-blue:       #005596;


  /* =======================================================
     02. PAGE BACKGROUNDS
  ======================================================= */

  --bg-main:       var(--oa-white);
  --bg-surface:    var(--oa-white);
  --bg-elevated:   var(--oa-light-grey);
  --bg-overlay:    rgba(3, 0, 6, 0.65);


  /* =======================================================
     03. SURFACES
     Dark brand-grey surfaces support reversed white logos
     and provide contrast for the site header/navigation.
  ======================================================= */

  --surface-1:     var(--oa-grey);
  --surface-2:     #43515B;
  --surface-3:     var(--oa-light-grey);
  --surface-soft:  var(--oa-light-grey);

  --surface-header: var(--oa-grey);
  --surface-nav:    var(--oa-grey);
  --surface-card:   var(--oa-white);

  --glass-bg:      rgba(54, 69, 79, 0.06);
  --glass-border:  rgba(54, 69, 79, 0.16);
  --glass-blur:    blur(10px);


  /* =======================================================
     04. BORDERS
  ======================================================= */

  --border-subtle:  rgba(54, 69, 79, 0.18);
  --border-strong:  rgba(54, 69, 79, 0.35);
  --border-accent:  var(--oa-red);


  /* =======================================================
     05. TEXT
  ======================================================= */

  --text-primary:   var(--oa-black);
  --text-secondary: var(--oa-grey);
  --text-muted:     #647078;
  --text-inverse:   var(--oa-white);

  --text-on-dark:   var(--oa-white);
  --text-on-light:  var(--oa-black);


  /* =======================================================
     06. BRAND ACCENTS
  ======================================================= */

  --accent-primary:   var(--oa-red);
  --accent-secondary: var(--oa-blue);
  --accent-hover:     var(--oa-dark-red);
  --accent-glow:      rgba(227, 24, 55, 0.18);

  --brand-primary:    var(--oa-white);
  --brand-secondary:  var(--oa-grey);
  --brand-highlight:  var(--oa-red);


  /* =======================================================
     07. LINKS
  ======================================================= */

  --link-color:        var(--oa-red);
  --link-hover:        var(--oa-dark-red);
  --link-visited:      var(--oa-dark-red);
  --link-on-dark:      var(--oa-white);
  --link-on-dark-hover: var(--oa-light-grey);


  /* =======================================================
     08. INTERACTIVE STATES
  ======================================================= */

  --hover-overlay:  rgba(54, 69, 79, 0.06);
  --active-overlay: rgba(54, 69, 79, 0.12);

  --hover-dark-overlay:  rgba(255, 255, 255, 0.08);
  --active-dark-overlay: rgba(255, 255, 255, 0.14);


  /* =======================================================
     09. STATUS COLORS
     Status colors communicate meaning, not brand identity.
  ======================================================= */

  --color-success:    #287A4B;
  --color-success-bg: #E8F4EC;

  --color-error:      var(--oa-red);
  --color-error-bg:   #FCE8EC;

  --color-warning:    #805900;
  --color-warning-bg: #FFF4D6;

  --color-info:       var(--oa-blue);
  --color-info-bg:    #E8F1F8;


  /* =======================================================
     10. SHADOWS
  ======================================================= */

  --shadow-sm:    0 2px 6px rgba(3, 0, 6, 0.10);
  --shadow-md:    0 6px 20px rgba(3, 0, 6, 0.14);
  --shadow-lg:    0 10px 40px rgba(3, 0, 6, 0.20);
  --shadow-glow:  0 0 12px var(--accent-glow);


  /* =======================================================
     11. CORNERS
  ======================================================= */

  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;


  /* =======================================================
     12. SPACING
  ======================================================= */

  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 40px;


  /* =======================================================
     13. TRANSITIONS
  ======================================================= */

  --transition-fast: 0.15s ease;
  --transition:      0.25s ease;
  --transition-slow: 0.4s ease;


  /* =======================================================
     14. LAYERING
  ======================================================= */

  --z-base:     1;
  --z-overlay:  900;
  --z-dropdown: 1000;
  --z-modal:    2000;


  /* =======================================================
     15. FOCUS & DISABLED STATES
  ======================================================= */

  --focus-ring:       0 0 0 3px rgba(227, 24, 55, 0.35);
  --opacity-disabled: 0.5;


  /* =======================================================
     16. TYPOGRAPHY
  ======================================================= */

  --font-family-base:
    system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --font-size-xs: 12px;
  --font-size-sm: 14px;
  --font-size-md: 16px;
  --font-size-lg: 18px;
  --font-size-xl: 22px;

  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 600;


  /* =======================================================
     17. LAYOUT
  ======================================================= */

  --container-width: 1200px;
  --content-width:   900px;


  /* =======================================================
     18. PAGE BUTTONS
  ======================================================= */

  --page-btn-bg:          var(--oa-white);
  --page-btn-border:      var(--border-subtle);
  --page-btn-text:        var(--oa-grey);
  --page-btn-hover-text:  var(--oa-dark-red);
  --page-btn-hover-border: var(--oa-red);

  --btn-success-text:      var(--color-success);
  --btn-success-bg-hover:  var(--color-success-bg);

  --btn-warning-text:      var(--color-warning);
  --btn-warning-bg-hover:  var(--color-warning-bg);

  --btn-info-text:         var(--color-info);
  --btn-info-bg-hover:     var(--color-info-bg);


  /* =======================================================
     19. ALERTS — LEGACY COMPATIBILITY
  ======================================================= */

  --alert-error-bg:     var(--color-error-bg);
  --alert-error-border: var(--color-error);
  --alert-error-text:   var(--oa-black);

  --alert-notice-bg:     var(--color-success-bg);
  --alert-notice-border: var(--color-success);
  --alert-notice-text:   var(--oa-black);


  /* =======================================================
     20. TOASTS
  ======================================================= */

  --toast-bg:     var(--oa-grey);
  --toast-text:   var(--oa-white);
  --toast-shadow: var(--shadow-md);


  /* =======================================================
     21. STATUS NOTES
  ======================================================= */

  --status-new:     var(--color-success);
  --status-changed: var(--oa-blue);
  --status-removed: var(--oa-red);
  --status-known:   var(--color-warning);
  --status-wanted:  var(--oa-blue);


  /* =======================================================
     22. DROPDOWNS
  ======================================================= */

  --dropdown-border-hover: var(--oa-red);


  /* =======================================================
     23. ERROR PAGE
  ======================================================= */

  --error-card-bg:     var(--oa-white);
  --error-card-border: var(--border-subtle);

}