/* SASAL Design System — Atlas tokens.
 * Source: SASAL Design System/tokens (verbatim). Fonts are enqueued separately
 * in inc/setup.php so this file stays cache-friendly and CDN-free.
 */

/* ---- tokens/colors.css ---- */
:root{
/* Deep field — the map's own colour. Hero, inverse sections, chart canvas. */
--field-900:#0B1F1A;--field-800:#0E2A24;--field-700:#153A32;--field-600:#173F36;--field-500:#1D5245;
/* Green — the primary action and the highlighted landmass. */
--green-900:#0A3A2F;--green-800:#0F4A3C;--green-700:#1F6F5C;--green-600:#2C7A66;--green-500:#3E9E88;--green-300:#8FD3C2;--green-100:#DBEEE8;--green-50:#EEF7F4;
/* Coral — pins, corridor arcs, live signals. Graphics only, never body text. */
--coral-700:#C74A2E;--coral-600:#E85C3C;--coral-500:#FF6B4A;--coral-300:#FFAF9B;--coral-100:#FFE6DF;
/* Paper neutrals — warmed a touch so they sit under the map. */
--paper-0:#FFFFFF;--paper-25:#FCFCFA;--paper-50:#F7F8F6;--paper-100:#F2F4F1;--paper-200:#E2E6E1;--paper-300:#CBD2CD;
--slate-400:#9AA5A0;--slate-500:#6E7A74;--slate-600:#54615A;--slate-700:#46554E;--slate-800:#26332C;--slate-900:#101A16;
/* Semantic hues */
--amber-600:#9A6B12;--amber-100:#F8EEDA;
--red-600:#C0392B;--red-100:#FBE5E1;
/* Map palette — used by WorldMap and RouteStrip, nowhere else. */
--map-sea:#0E2A24;--map-land:#153A32;--map-land-active:#1D5245;--map-land-focus:#2C7A66;--map-stroke:#0B1F1A;--map-route:#FF6B4A;--map-pin:#FF6B4A;
/* Data ramp — corridor and sector charts, in order of use. */
--data-1:#0B1F1A;--data-2:#1F6F5C;--data-3:#3E9E88;--data-4:#8FD3C2;--data-5:#FF6B4A;--data-6:#9A6B12;--data-7:#54615A;--data-8:#CBD2CD;
}

/* ---- tokens/typography.css ---- */
:root{
/* Keep first paint stable on a cold load. These are local platform faces, so
   their metrics are available before the document is painted. */
--font-sans:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI","Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic UI","Yu Gothic",Meiryo,sans-serif;
--font-jp:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic UI","Yu Gothic",Meiryo,sans-serif;
--font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace;

--text-2xs:11px;--text-xs:12px;--text-sm:13px;--text-base:14px;--text-md:15px;--text-lg:17px;--text-xl:20px;--text-2xl:24px;--text-3xl:30px;--text-4xl:40px;--text-5xl:46px;--text-6xl:64px;

--leading-tight:1.02;--leading-snug:1.18;--leading-normal:1.5;--leading-relaxed:1.7;

/* Atlas leans light: 300 for display, 400 body, 500 for labels and buttons. */
--weight-light:300;--weight-regular:400;--weight-medium:500;--weight-semibold:600;

--tracking-display:-0.03em;--tracking-heading:-0.02em;--tracking-normal:0;--tracking-eyebrow:0.18em;

--type-display:var(--weight-light) var(--text-6xl)/var(--leading-tight) var(--font-sans);
--type-h1:var(--weight-light) var(--text-5xl)/1.04 var(--font-sans);
--type-h2:var(--weight-medium) var(--text-4xl)/1.1 var(--font-sans);
--type-h3:var(--weight-medium) var(--text-2xl)/1.2 var(--font-sans);
--type-h4:var(--weight-medium) var(--text-xl)/1.25 var(--font-sans);
--type-body:var(--weight-regular) var(--text-md)/var(--leading-relaxed) var(--font-sans);
--type-body-sm:var(--weight-regular) var(--text-base)/var(--leading-normal) var(--font-sans);
--type-label:var(--weight-medium) var(--text-sm)/1.3 var(--font-sans);
--type-eyebrow:var(--weight-semibold) var(--text-2xs)/1.2 var(--font-sans);
--type-metric:var(--weight-regular) var(--text-3xl)/1 var(--font-mono);
--type-mono-sm:var(--weight-regular) var(--text-xs)/1.5 var(--font-mono);
}

/* ---- tokens/spacing.css ---- */
:root{
--space-0:0px;--space-px:1px;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;--space-7:28px;--space-8:32px;--space-10:40px;--space-12:48px;--space-16:64px;--space-18:70px;--space-20:80px;--space-24:100px;--space-32:128px;
--section-y:100px;--section-y-tight:64px;
}

/* ---- tokens/radius.css ---- */
:root{
--radius-xs:2px;--radius-sm:4px;--radius-md:8px;--radius-lg:12px;--radius-xl:16px;--radius-2xl:20px;--radius-3xl:28px;--radius-pill:999px;--radius-circle:50%;
/* Atlas roles: everything you touch is a pill, everything you read sits in a soft 20px card. */
--radius-control:999px;
--radius-card:20px;
--radius-panel:16px;
--radius-bubble:18px;
--radius-media:16px;
}

/* ---- tokens/elevation.css ---- */
:root{
/* Shadows are green-black and very soft — the map carries the depth, not the cards. */
--shadow-none:none;
--shadow-xs:0 1px 2px rgba(11,31,26,.05);
--shadow-sm:0 2px 6px rgba(11,31,26,.06);
--shadow-md:0 8px 24px rgba(11,31,26,.08);
--shadow-lg:0 18px 48px rgba(11,31,26,.12);
--shadow-overlay:0 32px 80px rgba(11,31,26,.20);
--shadow-focus:0 0 0 3px rgba(31,111,92,.24);
--scrim-map:linear-gradient(180deg,rgba(11,31,26,.72) 0%,rgba(11,31,26,.18) 34%,rgba(11,31,26,.20) 62%,rgba(11,31,26,.88) 100%); /* @kind other */
--blur-header:blur(12px); /* @kind other */
}

/* ---- tokens/motion.css ---- */
:root{
--duration-instant:80ms; /* @kind other */
--duration-fast:140ms; /* @kind other */
--duration-base:200ms; /* @kind other */
--duration-slow:320ms; /* @kind other */
--duration-slower:480ms; /* @kind other */
--ease-standard:cubic-bezier(.2,.6,.2,1); /* @kind other */
--ease-entrance:cubic-bezier(.16,.84,.44,1); /* @kind other */
--ease-exit:cubic-bezier(.4,0,1,1); /* @kind other */
--transition-control:background-color var(--duration-fast) var(--ease-standard),border-color var(--duration-fast) var(--ease-standard),color var(--duration-fast) var(--ease-standard),box-shadow var(--duration-fast) var(--ease-standard); /* @kind other */
}

/* ---- tokens/layout.css ---- */
:root{
--container-max:1280px;--container-narrow:720px;--container-wide:1440px;
--gutter:40px;--gutter-sm:24px;
--header-height:64px;
--grid-columns:12; /* @kind other */
--grid-gap:20px;
--card-padding:26px;--card-padding-sm:18px;
--control-height-sm:34px;--control-height-md:40px;--control-height-lg:46px;--control-height-xl:52px;
--map-split:47%;
--rail-width:300px;--workspace-width:320px;
}

/* ---- tokens/semantic.css ---- */
:root{
/* Surfaces */
--surface-page:var(--paper-25);
--surface-sunken:var(--paper-100);
--surface-card:var(--paper-0);
--surface-raised:var(--paper-0);
--surface-inverse:var(--field-800);
--surface-inverse-deep:var(--field-900);
--surface-map:var(--field-800);
--surface-accent-soft:var(--green-50);
--surface-accent-strong:var(--green-700);

/* Text — every value below passes 4.5:1 on --surface-page */
--text-primary:var(--slate-900);
--text-body:var(--slate-700);
--text-muted:var(--slate-500);
--text-faint:var(--slate-400);
--text-inverse:var(--paper-0);
--text-inverse-muted:rgba(255,255,255,.72);
--text-link:var(--green-700);
--text-link-hover:var(--green-800);
--text-accent:var(--coral-700);

/* Borders */
--border-subtle:var(--paper-200);
--border-default:var(--paper-300);
--border-strong:var(--slate-400);
--border-inverse:rgba(255,255,255,.22);
--border-focus:var(--green-700);

/* Actions */
--action-primary-bg:var(--green-700);
--action-primary-bg-hover:var(--green-800);
--action-primary-bg-active:var(--green-900);
--action-primary-fg:var(--paper-0);
--action-dark-bg:var(--slate-900);
--action-dark-bg-hover:#000000;
--action-secondary-bg:var(--paper-0);
--action-secondary-bg-hover:var(--paper-50);
--action-secondary-border:var(--border-subtle);
--action-secondary-fg:var(--slate-900);
--action-ghost-fg:var(--slate-700);
--action-ghost-bg-hover:var(--paper-100);
--action-inverse-bg:var(--paper-0);
--action-inverse-fg:var(--slate-900);
--action-danger-bg:var(--red-600);
--action-disabled-bg:var(--paper-100);
--action-disabled-fg:var(--slate-400);

/* Status */
--status-success-fg:var(--green-800);--status-success-bg:var(--green-100);
--status-warning-fg:var(--amber-600);--status-warning-bg:var(--amber-100);
--status-danger-fg:var(--red-600);--status-danger-bg:var(--red-100);
--status-info-fg:var(--field-700);--status-info-bg:var(--paper-100);
--status-neutral-fg:var(--slate-600);--status-neutral-bg:var(--paper-100);
--status-live-fg:var(--coral-700);--status-live-bg:var(--coral-100);

/* Focus */
--focus-ring:var(--shadow-focus);
--focus-ring-offset:2px;
}

/* ---- tokens/base.css ---- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--surface-page);color:var(--text-body);font:var(--type-body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,h4,h5,h6{margin:0;color:var(--text-primary);letter-spacing:var(--tracking-heading);text-wrap:balance}
p{margin:0;text-wrap:pretty}
a{color:var(--text-link);text-decoration:none;transition:color var(--duration-fast) var(--ease-standard)}
a:hover{color:var(--text-link-hover)}
:focus-visible{outline:2px solid var(--border-focus);outline-offset:var(--focus-ring-offset)}
img{max-width:100%;display:block}
button,input,select,textarea{font:inherit;color:inherit}
::selection{background:var(--green-100);color:var(--field-900)}
.sasal-eyebrow{font:var(--type-eyebrow);letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--text-muted)}