/* ACPG direction A2 "Navy Reserve" (DECIDED 2026-11-11, .architect/03-design.md); light values are A2, dark values are still direction A. Token names are checked by tests/baseline-design.php. */
@font-face{font-family:"Noto Sans";font-style:normal;font-weight:100 900;font-display:swap;src:url("../fonts/noto-sans-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Noto Sans Thai";font-style:normal;font-weight:100 900;font-display:swap;src:url("../fonts/noto-sans-thai.woff2") format("woff2");unicode-range:U+02D7,U+0303,U+0331,U+0E01-0E5B,U+200C-200D,U+25CC}
:root {
  --color-primary: #001489;
  --color-on-primary: #ffffff;
  --color-primary-dark: #000d5c;
  --color-primary-light: #307fe2;
  --color-bg: #f4f6fb;
  --color-surface: #ffffff;
  --color-text: #10163a;
  --color-text-muted: #5a6288;
  --color-border: #e3e7f3;
  --color-border-input: #7c86b6;
  --color-border-table: #edf0f7;
  --color-secondary-bg: #e6ebf8;
  --color-code-bg: #eef1f9;
  --color-notice-bg: #fff3d1;
  --color-notice-text: #6a4800;

  --color-heading: #001489;
  --color-accent: #307fe2;
  --color-accent-text: #1f64c8;
  --color-focus: #307fe2;
  --color-on-hero: #ffffff;
  --gradient-hero: linear-gradient(135deg, #000a3d 0%, #001489 55%, #1f4fc0 100%);

  --status-pending-text: #7a4e05;
  --status-pending-bg: #fbf4e6;
  --status-pending-dot: #b57a10;
  --status-approved-text: #0b5a4a;
  --status-approved-bg: #e6f3ef;
  --status-approved-dot: #1a8f75;
  --status-rejected-text: #9a1d33;
  --status-rejected-bg: #fbecef;
  --status-rejected-dot: #d14a62;
  --status-submitted-text: #001489;
  --status-submitted-bg: #eaeefb;
  --status-submitted-dot: #307fe2;
  --status-closed-text: #3f4769;
  --status-closed-bg: #eef0f6;
  --status-closed-dot: #7a82a8;

  --font-sans: "Noto Sans", "Noto Sans Thai", Tahoma, system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --text-xs: 12px;
  --text-sm: 14px;
  --text-base: 16px;
  --text-lg: 22px;
  --text-xl: 32px;
  --text-2xl: 40px;
  --line-height-normal: 1.6;
  --line-height-heading: 1.3;
  --weight-heading: 600;

  --space-xs: 6px;
  --space-sm: 10px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 36px;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-pill: 999px;
  --control-h: 48px;
  --row-h: 46px;
  --shadow-sm: 0 2px 6px rgba(0, 14, 90, .06);
  --shadow-md: 0 10px 30px rgba(0, 14, 90, .09);

  /* Chrome = navy bars and side navigation; stays dark navy in both schemes (03-design.md Components). */
  --color-chrome: #001489;
  --color-chrome-deep: #000a3d;
  --color-on-chrome: #ffffff;
  --color-on-chrome-muted: #c3cbf2;
  --color-chrome-hover: rgba(255, 255, 255, .1);
  --color-overlay: rgba(5, 10, 43, .55);
  --color-hover: #f6f7fc;
  --sidenav-w: 248px;
  --topbar-h: 56px;
  --content-max: 1200px;
  --icon-sm: 16px;
  --icon-md: 20px;
  --icon-lg: 24px;
  --icon-stroke: 1.9;
  --touch-min: 44px;
  --tabbar-h: 64px;
  --color-media-from: #b2e4fd;
  --color-media-to: #86bef2;
  /* A2 additions (new names; nothing renamed). */
  --radius-btn: 14px;
  --radius-chip: 8px;
  --shadow-lg: 0 16px 40px rgba(0, 14, 90, .2);
  --gradient-primary: linear-gradient(135deg, #000a3d 0%, #001489 55%, #1f4fc0 100%);
  --hero-photo: url("../img/a2/skyline.jpg");
  --hero-scrim: linear-gradient(180deg, rgba(0, 8, 50, .74) 0%, rgba(0, 8, 50, .7) 62%, rgba(0, 8, 50, .94) 100%);
  --hero-scrim-wide: linear-gradient(90deg, rgba(0, 8, 50, .86) 0%, rgba(0, 8, 50, .78) 58%, rgba(0, 8, 50, .18) 100%), linear-gradient(180deg, rgba(0, 8, 50, 0) 62%, rgba(0, 8, 50, .9) 100%);
  --photo-scrim: linear-gradient(180deg, rgba(0, 8, 50, 0) 0%, rgba(0, 8, 50, .72) 46%, rgba(0, 8, 50, .9) 100%);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-primary: #9aa8ff;
    --color-on-primary: #000a4a;
    --color-primary-dark: #7c8cf5;
    --color-primary-light: #5c9bef;
    --color-bg: #050a2b;
    --color-surface: #0d1440;
    --color-text: #e9ecfb;
    --color-text-muted: #a4acd4;
    --color-border: #26306a;
    --color-border-input: #6a74ac;
    --color-border-table: #1e2760;
    --color-secondary-bg: #172057;
    --color-code-bg: #111a4c;
    --color-notice-bg: #3a2e0a;
    --color-notice-text: #ffd98a;
    --color-heading: #c9d1ff;
    --color-accent: #5c9bef;
    --color-accent-text: #8cbbff;
    --color-focus: #8cbbff;
    --gradient-hero: linear-gradient(135deg, #000a4a 0%, #00148a 60%, #1a3fa0 100%);
    --gradient-primary: linear-gradient(135deg, #9aa8ff 0%, #9aa8ff 100%);
    --shadow-lg: 0 16px 40px rgba(0, 0, 0, .5);
    --status-pending-text: #f4c77a;
    --status-pending-bg: #2e2410;
    --status-pending-dot: #e0a43f;
    --status-approved-text: #86dcc4;
    --status-approved-bg: #0e2c27;
    --status-approved-dot: #3cc09d;
    --status-rejected-text: #f5a3b2;
    --status-rejected-bg: #35131c;
    --status-rejected-dot: #e46c83;
    --status-submitted-text: #b9c5ff;
    --status-submitted-bg: #141e55;
    --status-submitted-dot: #6ea3f2;
    --status-closed-text: #c3c8e0;
    --status-closed-bg: #1a2048;
    --status-closed-dot: #8a91b4;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, .45);
    --color-chrome: #0b1554;
    --color-chrome-deep: #070e3d;
    --color-on-chrome: #ffffff;
    --color-on-chrome-muted: #b4bde6;
    --color-chrome-hover: rgba(255, 255, 255, .08);
    --color-overlay: rgba(0, 0, 0, .6);
    --color-media-from: #3a5f9e;
    --color-media-to: #24447e;
    --color-hover: #121a4d;
  }
}

[data-theme="dark"] {
  --color-primary: #9aa8ff;
  --color-on-primary: #000a4a;
  --color-primary-dark: #7c8cf5;
  --color-primary-light: #5c9bef;
  --color-bg: #050a2b;
  --color-surface: #0d1440;
  --color-text: #e9ecfb;
  --color-text-muted: #a4acd4;
  --color-border: #26306a;
  --color-border-input: #6a74ac;
  --color-border-table: #1e2760;
  --color-secondary-bg: #172057;
  --color-code-bg: #111a4c;
  --color-notice-bg: #3a2e0a;
  --color-notice-text: #ffd98a;
  --color-heading: #c9d1ff;
  --color-accent: #5c9bef;
  --color-accent-text: #8cbbff;
  --color-focus: #8cbbff;
  --gradient-hero: linear-gradient(135deg, #000a4a 0%, #00148a 60%, #1a3fa0 100%);
  --gradient-primary: linear-gradient(135deg, #9aa8ff 0%, #9aa8ff 100%);
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, .5);
  --status-pending-text: #f4c77a;
  --status-pending-bg: #2e2410;
  --status-pending-dot: #e0a43f;
  --status-approved-text: #86dcc4;
  --status-approved-bg: #0e2c27;
  --status-approved-dot: #3cc09d;
  --status-rejected-text: #f5a3b2;
  --status-rejected-bg: #35131c;
  --status-rejected-dot: #e46c83;
  --status-submitted-text: #b9c5ff;
  --status-submitted-bg: #141e55;
  --status-submitted-dot: #6ea3f2;
  --status-closed-text: #c3c8e0;
  --status-closed-bg: #1a2048;
  --status-closed-dot: #8a91b4;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, .45);
  --color-chrome: #0b1554;
  --color-chrome-deep: #070e3d;
  --color-on-chrome: #ffffff;
  --color-on-chrome-muted: #b4bde6;
  --color-chrome-hover: rgba(255, 255, 255, .08);
  --color-overlay: rgba(0, 0, 0, .6);
    --color-media-from: #3a5f9e;
    --color-media-to: #24447e;
  --color-hover: #121a4d;
}