/* ==========================================================================
   GetPackSure Design Tokens & Local Fonts (Round 1)
   Theme: Professional Navy + Orange
   ========================================================================== */

/* Prompt (500 / 600 / 700) */
@font-face {
  font-family: 'Prompt';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/Prompt-500.woff2') format('woff2');
}

@font-face {
  font-family: 'Prompt';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/Prompt-600.woff2') format('woff2');
}

@font-face {
  font-family: 'Prompt';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/Prompt-700.woff2') format('woff2');
}

/* Noto Sans Thai (400 / 500 / 600) */
@font-face {
  font-family: 'Noto Sans Thai';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/NotoSansThai-400.woff2') format('woff2');
}

@font-face {
  font-family: 'Noto Sans Thai';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/NotoSansThai-500.woff2') format('woff2');
}

@font-face {
  font-family: 'Noto Sans Thai';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/NotoSansThai-600.woff2') format('woff2');
}

:root,
html[data-theme="light"],
:root[data-theme="light"]{
  /* Absolute Brand Palette - Never change in dark mode */
  --navy:#0F2A4A; --navy-dark:#0A1C33; --navy-soft:#1B3657;
  --orange:#F7731C; --orange-tint:#FFF8F2; --orange-chip:#FFE2CC;
  --text-on-navy:#C9D6E8;
  --radius-sm:10px; --radius:14px; --radius-lg:20px;
  --font-head:'Prompt',system-ui,sans-serif;
  --font-body:'Noto Sans Thai',system-ui,sans-serif;
  --tap:48px;

  /* Semantic Design Tokens (Light Theme Default) */
  --bg:#F4F6FA;
  --surface:#FFFFFF;
  --surface-elevated:#FFFFFF;
  --line:#DDE3EC;
  --line-strong:#C3CCD9;
  --heading:#0F2A4A;
  --text:#14213D;
  --text-muted:#52627A;
  --eyebrow:#B5500C;
  --chip-orange-bg:#FFE2CC;
  --chip-orange-text:#0A1C33;
  --chip-success-bg:#BFE6D2;
  --chip-success-text:#0A5A33;
  --icon-bg:#FFE2CC;
  --icon-fg:#0A1C33;
  --icon-navy-bg:#0F2A4A;
  --chip-soon-bg:#E6ECF4;
  --chip-soon-text:#3D4D63;
  --cmp-gps-bg:#FFF8F2;
  --cmp-gps-fg:#B5500C;
  --cmp-cross-bg:#F1F3F7;
  --cmp-cross-fg:#8A94A6;
  --cmp-check-bg:#D9F2E4;
  --cmp-check-fg:#0A5A33;
  --pricing-check:#0A5A33;
  --faq-highlight-bg:#FFF8F2;
  --faq-highlight-border:#FFE2CC;
  --btn-on-border:#0F2A4A;
  --btn-on-text:#0F2A4A;
  --btn-on-bg:#FFFFFF;
  --footer-bg:#FFFFFF;
  --footer-border:#DDE3EC;
  --footer-text:#52627A;
}

/* Semantic Design Tokens for Dark Theme */
/* Note: Absolute --navy, --navy-dark, --orange are preserved for backgrounds & brand accents */
html[data-theme="dark"],
:root[data-theme="dark"]{
  --bg:#0B1220;
  --surface:#121A2B;
  --surface-elevated:#172136;
  --line:#24324A;
  --line-strong:#3A4A66;
  --heading:#F1F4F9;
  --text:#E6ECF4;
  --text-muted:#A9B6CA;
  --eyebrow:#FF9A55;
  --chip-orange-bg:rgba(247,115,28,0.16);
  --chip-orange-text:#FFB27A;
  --chip-success-bg:#12382A;
  --chip-success-text:#8EE0B5;
  --icon-bg:rgba(247,115,28,0.16);
  --icon-fg:#FFB27A;
  --icon-navy-bg:#23406B;
  --chip-soon-bg:#24324A;
  --chip-soon-text:#C9D6E8;
  --cmp-gps-bg:rgba(247,115,28,0.08);
  --cmp-gps-fg:#FF9A55;
  --cmp-cross-bg:#1C2840;
  --cmp-cross-fg:#8A94A6;
  --cmp-check-bg:#12382A;
  --cmp-check-fg:#8EE0B5;
  --pricing-check:#8EE0B5;
  --faq-highlight-bg:rgba(247,115,28,0.08);
  --faq-highlight-border:rgba(247,115,28,0.35);
  --btn-on-border:#3A4A66;
  --btn-on-text:#F1F4F9;
  --btn-on-bg:#121A2B;
  --footer-bg:#0A1C33;
  --footer-border:#1B3657;
  --footer-text:#C9D6E8;
}