/* =================================================================
   ATOM × Material 3 — Token layer
   ATOM's brand palette mapped onto Material Design 3's role model:
   tonal palettes · surface containers · state layers · elevation.
   ================================================================= */

/* ---- ATOM Sans (brand font) ---- */
@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Noto+Sans+Myanmar:wght@400;500;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

@font-face{font-family:'ATOM Sans';font-weight:300;font-style:normal;font-display:swap;src:url('../fonts/Atom_Sans_Light.woff') format('woff')}
@font-face{font-family:'ATOM Sans';font-weight:500;font-style:normal;font-display:swap;src:url('../fonts/Atom_Sans_Medium.woff') format('woff')}
@font-face{font-family:'ATOM Sans';font-weight:600;font-style:normal;font-display:swap;src:url('../fonts/Atom_Sans_DemiBold.woff') format('woff')}
@font-face{font-family:'ATOM Sans';font-weight:700;font-style:normal;font-display:swap;src:url('../fonts/Atom_Sans_Bold.woff') format('woff')}
@font-face{font-family:'ATOM Sans';font-weight:800;font-style:normal;font-display:swap;src:url('../fonts/Atom_Sans_Extra_Bold.woff') format('woff')}

:root{
  /* ---- Raw ATOM palette (reference tones) ---- */
  --atom-pure-white:#FFFFFF;
  --atom-deep-blue:#070952;
  --atom-dark-blue:#1229B3;
  --atom-social-blue:#2449FB;
  --atom-game-blue:#00AAFF;
  --atom-cyan:#00C8FF;
  --atom-breeze-blue:#91E5F6;
  --atom-casual-green:#88E308;
  --atom-highlight-green:#ACFF35;
  --atom-sweet-pink:#FF4D6D;
  --atom-chirpy-purple:#8900F2;
  --atom-simple-pink:#FFCCD5;
  --atom-tasty-peach:#FF6B6B;
  --atom-hyper-turquoise:#03FCBA;
  --atom-bright-slate:#CFDBD5;

  /* ---- Type families ---- */
  --md-font-brand:'ATOM Sans', system-ui, sans-serif;
  --md-font-plain:'ATOM Sans', system-ui, sans-serif;
  --md-font-logotype:'Archivo Black','ATOM Absolute Geo', system-ui, sans-serif;
  --md-font-mono:'JetBrains Mono', ui-monospace, monospace;
  --md-font-burmese:'Noto Sans Myanmar', sans-serif;

  /* ---- M3 type scale (px) ---- */
  --md-display-large:57px;   --md-display-medium:45px;  --md-display-small:36px;
  --md-headline-large:32px;  --md-headline-medium:28px; --md-headline-small:24px;
  --md-title-large:22px;     --md-title-medium:16px;    --md-title-small:14px;
  --md-body-large:16px;      --md-body-medium:14px;     --md-body-small:12px;
  --md-label-large:14px;     --md-label-medium:12px;    --md-label-small:11px;

  /* ---- M3 shape scale ---- */
  --md-shape-none:0;
  --md-shape-xs:4px;
  --md-shape-sm:8px;
  --md-shape-md:12px;
  --md-shape-lg:16px;
  --md-shape-xl:28px;
  --md-shape-full:999px;

  /* ---- Spacing (M3 4dp grid) ---- */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px;
  --sp-6:32px; --sp-7:48px; --sp-8:64px; --sp-9:96px; --sp-10:128px;

  /* ---- State-layer opacities ---- */
  --md-state-hover:0.08;
  --md-state-focus:0.10;
  --md-state-press:0.12;
  --md-state-drag:0.16;

  /* ---- Motion (ATOM brand easing) ---- */
  --md-ease-standard:cubic-bezier(0.2,0,0,1);
  --md-ease-emphasized:cubic-bezier(0.2,0,0,1);
  --md-ease-accel:cubic-bezier(0.3,0,1,1);
  --md-ease-decel:cubic-bezier(0,0,0,1);
  --md-dur-short:120ms;
  --md-dur-medium:220ms;
  --md-dur-long:420ms;
}

/* =================================================================
   LIGHT THEME  (Pure White + working blues)
   ================================================================= */
:root,[data-theme="light"]{
  color-scheme:light;

  --md-primary:#2449FB;
  --md-on-primary:#FFFFFF;
  --md-primary-container:#DCE1FF;
  --md-on-primary-container:#00115B;

  --md-secondary:#0086C9;
  --md-on-secondary:#FFFFFF;
  --md-secondary-container:#C7E7FF;
  --md-on-secondary-container:#001E30;

  --md-tertiary:#8900F2;
  --md-on-tertiary:#FFFFFF;
  --md-tertiary-container:#EEDBFF;
  --md-on-tertiary-container:#2C0050;

  --md-error:#C0123A;
  --md-on-error:#FFFFFF;
  --md-error-container:#FFD9DF;
  --md-on-error-container:#40000C;

  --md-success:#2E6B00;
  --md-success-container:#A7F84E;
  --md-on-success-container:#0E2000;

  --md-background:#FBFAFF;
  --md-on-background:#11122E;
  --md-surface:#FBFAFF;
  --md-on-surface:#11122E;
  --md-surface-variant:#E2E2EE;
  --md-on-surface-variant:#45465A;

  --md-surface-dim:#DAD8E8;
  --md-surface-bright:#FBFAFF;
  --md-surface-container-lowest:#FFFFFF;
  --md-surface-container-low:#F4F3FC;
  --md-surface-container:#EEEDF7;
  --md-surface-container-high:#E8E7F2;
  --md-surface-container-highest:#E3E1EC;

  --md-outline:#767685;
  --md-outline-variant:#C7C6D6;
  --md-inverse-surface:#11122E;
  --md-inverse-on-surface:#F1EFFB;
  --md-inverse-primary:#B8C3FF;
  --md-scrim:rgba(7,9,82,0.4);

  /* component-friendly aliases */
  --md-on-primary-rgb:255,255,255;
  --md-on-surface-rgb:17,18,46;
  --md-primary-rgb:36,73,251;

  /* elevation (M3 light) */
  --md-elev-0:none;
  --md-elev-1:0 1px 2px rgba(7,9,82,.20), 0 1px 3px 1px rgba(7,9,82,.10);
  --md-elev-2:0 1px 2px rgba(7,9,82,.20), 0 2px 6px 2px rgba(7,9,82,.12);
  --md-elev-3:0 4px 8px 3px rgba(7,9,82,.12), 0 1px 3px rgba(7,9,82,.20);
  --md-elev-4:0 6px 10px 4px rgba(7,9,82,.12), 0 2px 3px rgba(7,9,82,.22);
  --md-elev-5:0 8px 12px 6px rgba(7,9,82,.12), 0 4px 4px rgba(7,9,82,.22);
}

/* =================================================================
   DARK THEME  (Deep Blue surfaces)
   ================================================================= */
[data-theme="dark"]{
  color-scheme:dark;

  --md-primary:#B8C3FF;
  --md-on-primary:#00208E;
  --md-primary-container:#1229B3;
  --md-on-primary-container:#DCE1FF;

  --md-secondary:#7CD2FF;
  --md-on-secondary:#00344F;
  --md-secondary-container:#004C6F;
  --md-on-secondary-container:#C7E7FF;

  --md-tertiary:#DDB7FF;
  --md-on-tertiary:#48007E;
  --md-tertiary-container:#6800B6;
  --md-on-tertiary-container:#EEDBFF;

  --md-error:#FFB3BB;
  --md-on-error:#67001A;
  --md-error-container:#900028;
  --md-on-error-container:#FFD9DF;

  --md-success:#8DDB4F;
  --md-success-container:#205000;
  --md-on-success-container:#A7F84E;

  --md-background:#0A0B33;
  --md-on-background:#E3E1F4;
  --md-surface:#0A0B33;
  --md-on-surface:#E3E1F4;
  --md-surface-variant:#45465A;
  --md-on-surface-variant:#C5C5DC;

  --md-surface-dim:#0A0B33;
  --md-surface-bright:#2D2E5C;
  --md-surface-container-lowest:#070826;
  --md-surface-container-low:#11123C;
  --md-surface-container:#161740;
  --md-surface-container-high:#20214C;
  --md-surface-container-highest:#2B2C58;

  --md-outline:#90909F;
  --md-outline-variant:#45465A;
  --md-inverse-surface:#E3E1F4;
  --md-inverse-on-surface:#11122E;
  --md-inverse-primary:#2449FB;
  --md-scrim:rgba(0,0,0,0.6);

  --md-on-primary-rgb:0,32,142;
  --md-on-surface-rgb:227,225,244;
  --md-primary-rgb:184,195,255;

  --md-elev-0:none;
  --md-elev-1:0 1px 3px 1px rgba(0,0,0,.45), 0 1px 2px rgba(0,0,0,.5);
  --md-elev-2:0 2px 6px 2px rgba(0,0,0,.45), 0 1px 2px rgba(0,0,0,.5);
  --md-elev-3:0 4px 8px 3px rgba(0,0,0,.45), 0 1px 3px rgba(0,0,0,.5);
  --md-elev-4:0 6px 10px 4px rgba(0,0,0,.45), 0 2px 3px rgba(0,0,0,.5);
  --md-elev-5:0 8px 12px 6px rgba(0,0,0,.45), 0 4px 4px rgba(0,0,0,.5);
}

/* =================================================================
   Base + M3 typography utilities
   ================================================================= */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--md-font-plain);
  background:var(--md-background);
  color:var(--md-on-background);
  -webkit-font-smoothing:antialiased;
  transition:background var(--md-dur-medium) var(--md-ease-standard),
             color var(--md-dur-medium) var(--md-ease-standard);
}

.md-display-large{font-family:var(--md-font-brand);font-weight:800;font-size:var(--md-display-large);line-height:1.05;letter-spacing:-0.02em}
.md-display-medium{font-family:var(--md-font-brand);font-weight:800;font-size:var(--md-display-medium);line-height:1.08;letter-spacing:-0.02em}
.md-display-small{font-family:var(--md-font-brand);font-weight:700;font-size:var(--md-display-small);line-height:1.12;letter-spacing:-0.01em}
.md-headline-large{font-family:var(--md-font-brand);font-weight:700;font-size:var(--md-headline-large);line-height:1.18;letter-spacing:-0.01em}
.md-headline-medium{font-family:var(--md-font-brand);font-weight:700;font-size:var(--md-headline-medium);line-height:1.2}
.md-headline-small{font-family:var(--md-font-brand);font-weight:600;font-size:var(--md-headline-small);line-height:1.25}
.md-title-large{font-family:var(--md-font-brand);font-weight:600;font-size:var(--md-title-large);line-height:1.27}
.md-title-medium{font-family:var(--md-font-brand);font-weight:600;font-size:var(--md-title-medium);line-height:1.5;letter-spacing:0.01em}
.md-title-small{font-family:var(--md-font-brand);font-weight:600;font-size:var(--md-title-small);line-height:1.43;letter-spacing:0.01em}
.md-body-large{font-family:var(--md-font-plain);font-weight:400;font-size:var(--md-body-large);line-height:1.5;letter-spacing:0.005em}
.md-body-medium{font-family:var(--md-font-plain);font-weight:400;font-size:var(--md-body-medium);line-height:1.43;letter-spacing:0.015em}
.md-body-small{font-family:var(--md-font-plain);font-weight:400;font-size:var(--md-body-small);line-height:1.33;letter-spacing:0.03em}
.md-label-large{font-family:var(--md-font-brand);font-weight:600;font-size:var(--md-label-large);line-height:1.43;letter-spacing:0.01em}
.md-label-medium{font-family:var(--md-font-brand);font-weight:600;font-size:var(--md-label-medium);line-height:1.33;letter-spacing:0.04em}
.md-label-small{font-family:var(--md-font-brand);font-weight:600;font-size:var(--md-label-small);line-height:1.45;letter-spacing:0.04em}

/* Tonal supergraphic accents kept as named gradients */
:root{
  --grad-hero:linear-gradient(135deg,var(--atom-social-blue) 0%,var(--atom-game-blue) 50%,var(--atom-cyan) 100%);
  --grad-energy:linear-gradient(135deg,var(--atom-social-blue) 0%,var(--atom-chirpy-purple) 100%);
  --grad-fresh:linear-gradient(135deg,var(--atom-cyan) 0%,var(--atom-hyper-turquoise) 100%);
  --grad-playful:linear-gradient(135deg,var(--atom-sweet-pink) 0%,var(--atom-tasty-peach) 100%);
  --grad-primary:linear-gradient(135deg,var(--atom-deep-blue) 0%,var(--atom-dark-blue) 45%,var(--atom-social-blue) 100%);
}