/* Refnusa brand tokens 1.0 (from the brand book, assets/brand.css and tokens.json). The ONLY file with colour values; every other stylesheet reads these.
   Light is the default; dark follows the system, or [data-theme="dark"] (site) / [data-tema="gelap"] (widgets). Fonts: /fonts, SIL OFL. */
@font-face{font-family:'Red Hat Display';src:url(/fonts/red-hat-display-var.woff2) format('woff2');font-weight:400 900;font-display:swap}
@font-face{font-family:'Red Hat Text';src:url(/fonts/red-hat-text-var.woff2) format('woff2');font-weight:400 700;font-display:swap}
@font-face{font-family:'Red Hat Mono';src:url(/fonts/red-hat-mono-var.woff2) format('woff2');font-weight:400 700;font-display:swap}
:root {
  --laut: #0F5EB4; --jingga: #FF731D; --kertas: #F5FAFE; --malam: #07203D;
  --main-50: #F2F7FF;
  --main-100: #CCE0FC;
  --main-200: #A6C9F7;
  --main-300: #80B0EF;
  --main-400: #5B97E4;
  --main-500: #367CD2;
  --main-600: #0F5EB4;
  --main-700: #004892;
  --main-800: #003671;
  --main-900: #002551;
  --main-950: #001535;
  --accent-50: #FFF4F0;
  --accent-100: #FFDACA;
  --accent-200: #FCBFA4;
  --accent-300: #F6A37C;
  --accent-400: #FF731D;
  --accent-500: #D75B02;
  --accent-600: #B04900;
  --accent-700: #8B3800;
  --accent-800: #682800;
  --accent-900: #481800;
  --accent-950: #2B0A00;
  --neutral-50: #F8FAFD;
  --neutral-100: #EFF2F7;
  --neutral-200: #DEE3EA;
  --neutral-300: #C8CED6;
  --neutral-400: #9FA5AD;
  --neutral-500: #7A8189;
  --neutral-600: #5E646C;
  --neutral-700: #43484F;
  --neutral-800: #2C3137;
  --neutral-900: #191D23;
  --neutral-950: #080B0F;
  --font-display: 'Red Hat Display', system-ui, sans-serif; --font-text: 'Red Hat Text', system-ui, sans-serif; --font-mono: 'Red Hat Mono', ui-monospace, Menlo, monospace;
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px;
  --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px;
  --bg: #F5FAFE;
  --surface: #FFFFFF;
  --surface-2: #F8FAFD;
  --surface-3: #EFF2F7;
  --border: #DEE3EA;
  --border-strong: #C8CED6;
  --text: #191D23;
  --text-muted: #5E646C;
  --text-faint: #7A8189;
  --primary: #0F5EB4;
  --primary-hover: #004892;
  --primary-soft: #F2F7FF;
  --on-primary: #FFFFFF;
  --accent: #FF731D;
  --accent-text: #B85315;
  --accent-soft: #FFF4F0;
  --link: #0F5EB4;
  --focus: #367CD2; /* brand book has #5B97E4 (2.9:1 on Kertas); main-500 clears the 3:1 focus-ring minimum */
  --success: #1E7F4E;
  --success-bg: #E5FAEC;
  --warning: #926500;
  --warning-bg: #FEF2DF;
  --danger: #C92F33;
  --danger-bg: #FEF0EE;
  --info: #2677A0;
  --info-bg: #E8F6FE;
  --map-bg: #E7EFF7;
  --map-region-border: #9DB0C6;
  --map-nodata: #D3DBE5;
  --map-hover: #B85315;
  --map-selected: #191D23;
  --code-bg: #07203D;
  --code-text: #E4EEF8;
  --code-muted: #8FA6BF;
  --code-key: #8CC0FF;
  --code-string: #FFB07A;
  --shadow-sm: 0 1px 2px rgba(7,32,61,.06), 0 1px 1px rgba(7,32,61,.04);
  --shadow-md: 0 4px 12px rgba(7,32,61,.08), 0 2px 4px rgba(7,32,61,.05);
  --shadow-lg: 0 16px 40px rgba(7,32,61,.14), 0 4px 10px rgba(7,32,61,.06);
  --seq-1: #EDF4FE;
  --seq-2: #D6E6FC;
  --seq-3: #B7D3F9;
  --seq-4: #94BDF4;
  --seq-5: #6DA4EB;
  --seq-6: #4A8ADC;
  --seq-7: #2B71C7;
  --seq-8: #1259AA;
  --seq-9: #064386;
  --seq-10: #032F61;
  --div-1: #003671;
  --div-2: #0656A9;
  --div-3: #3878C8;
  --div-4: #79A1D6;
  --div-5: #EFEEEC;
  --div-6: #FBBA96;
  --div-7: #FC9252;
  --div-8: #E26B06;
  --div-9: #A94E00;
  --cat-1: #0F5EB4; /* Laut */
  --cat-2: #FF731D; /* Jingga */
  --cat-3: #5FAF83; /* Daun */
  --cat-4: #AAD2FE; /* Langit */
  --cat-5: #A181C8; /* Lembayung */
  --cat-6: #756400; /* Zaitun */
  --cat-7: #71255C; /* Anggur */
  --cat-8: #EACD4E; /* Kuning */
  --radius-round: 9999px; --border-w: 1px;
  --fs-display: 3.5rem; --fs-h1: 2.5rem; --fs-h2: 1.875rem; --fs-h3: 1.375rem; --fs-h4: 1.0625rem; --fs-body-l: 1.125rem; --fs-body: 1rem; --fs-small: .875rem; --fs-label: .75rem; --fs-data-xl: 3rem; --fs-code: .875rem;
  --lh-display: 1.07; --lh-h1: 1.15; --lh-h2: 1.2; --lh-h3: 1.27; --lh-h4: 1.41; --lh-body-l: 1.55; --lh-body: 1.56; --lh-small: 1.5; --lh-label: 1.33; --lh-data-xl: 1.08; --lh-code: 1.57;
  --track-display: -.025em; --track-h1: -.02em; --track-h2: -.015em; --track-h3: -.01em; --track-label: .06em;
  --grid-max: 1200px; --grid-gutter: 24px;
  --ease: cubic-bezier(.2,.7,.2,1);
  --band-bg: #07203D; --band-text: #E8F1FA; --band-muted: #9DB5CE; --band-accent: #FF731D;
  --tint: #EEF4FA;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-tema="terang"]) {
    --bg: #07203D;
      --surface: #0C2B4E;
      --surface-2: #103358;
      --surface-3: #163D68;
      --border: #1C4472;
      --border-strong: #2A5A90;
      --text: #E8F1FA;
      --text-muted: #9DB5CE;
      --text-faint: #7A93AE;
      --primary: #80B0EF;
      --primary-hover: #A6C9F7;
      --primary-soft: #0E2F57;
      --on-primary: #07203D;
      --accent: #FF731D;
      --accent-text: #FF731D;
      --accent-soft: #3A1F12;
      --link: #80B0EF;
      --focus: #80B0EF;
      --success: #84D2A2;
      --success-bg: #08311C;
      --warning: #E3B56E;
      --warning-bg: #392400;
      --danger: #FFA098;
      --danger-bg: #421C19;
      --info: #84C7EF;
      --info-bg: #052D40;
      --map-bg: #0A2746;
      --map-region-border: #3F6590;
      --map-nodata: #1B3E66;
      --map-hover: #FF731D;
      --map-selected: #FFFFFF;
      --code-bg: #04162B;
      --code-text: #E4EEF8;
      --code-muted: #8FA6BF;
      --code-key: #8CC0FF;
      --code-string: #FFB07A;
      --shadow-sm: 0 1px 2px rgba(0,0,0,.3);
      --shadow-md: 0 4px 12px rgba(0,0,0,.35);
      --shadow-lg: 0 16px 40px rgba(0,0,0,.45);
      --seq-1: #182E4B;
      --seq-2: #1E3E66;
      --seq-3: #244D82;
      --seq-4: #2F61A0;
      --seq-5: #3E75BC;
      --seq-6: #508BD6;
      --seq-7: #6AA1E8;
      --seq-8: #87B7F6;
      --seq-9: #A8CDFF;
      --seq-10: #CEE3FF;
      --div-1: #9DC7FE;
      --div-2: #6AA1E8;
      --div-3: #3B7BCB;
      --div-4: #1C579E;
      --div-5: #2A3F57;
      --div-6: #83451E;
      --div-7: #B35713;
      --div-8: #EC6F00;
      --div-9: #FFA571;
      
    --tint: #082A4E;
    color-scheme: dark;
  }
}
:root[data-theme="dark"], :root[data-tema="gelap"] {
  --bg: #07203D;
    --surface: #0C2B4E;
    --surface-2: #103358;
    --surface-3: #163D68;
    --border: #1C4472;
    --border-strong: #2A5A90;
    --text: #E8F1FA;
    --text-muted: #9DB5CE;
    --text-faint: #7A93AE;
    --primary: #80B0EF;
    --primary-hover: #A6C9F7;
    --primary-soft: #0E2F57;
    --on-primary: #07203D;
    --accent: #FF731D;
    --accent-text: #FF731D;
    --accent-soft: #3A1F12;
    --link: #80B0EF;
    --focus: #80B0EF;
    --success: #84D2A2;
    --success-bg: #08311C;
    --warning: #E3B56E;
    --warning-bg: #392400;
    --danger: #FFA098;
    --danger-bg: #421C19;
    --info: #84C7EF;
    --info-bg: #052D40;
    --map-bg: #0A2746;
    --map-region-border: #3F6590;
    --map-nodata: #1B3E66;
    --map-hover: #FF731D;
    --map-selected: #FFFFFF;
    --code-bg: #04162B;
    --code-text: #E4EEF8;
    --code-muted: #8FA6BF;
    --code-key: #8CC0FF;
    --code-string: #FFB07A;
    --shadow-sm: 0 1px 2px rgba(0,0,0,.3);
    --shadow-md: 0 4px 12px rgba(0,0,0,.35);
    --shadow-lg: 0 16px 40px rgba(0,0,0,.45);
    --seq-1: #182E4B;
    --seq-2: #1E3E66;
    --seq-3: #244D82;
    --seq-4: #2F61A0;
    --seq-5: #3E75BC;
    --seq-6: #508BD6;
    --seq-7: #6AA1E8;
    --seq-8: #87B7F6;
    --seq-9: #A8CDFF;
    --seq-10: #CEE3FF;
    --div-1: #9DC7FE;
    --div-2: #6AA1E8;
    --div-3: #3B7BCB;
    --div-4: #1C579E;
    --div-5: #2A3F57;
    --div-6: #83451E;
    --div-7: #B35713;
    --div-8: #EC6F00;
    --div-9: #FFA571;
    
  --tint: #082A4E;
  color-scheme: dark;
}
:root[data-theme="light"], :root[data-tema="terang"] { color-scheme: light; }
