/* ==========================================================================
   Marine Directory UAE — "Swiss Editorial"
   01-tokens.css: fonts, tokens (light + dark), reset, base type, utilities.

   Load order: the layouts call `stylesheet_link_tag :app`, which links every
   .css file under app/assets/ sorted by logical path:
     01-tokens.css → 02-components.css → 03-workspace.css → pages/*.css
   Digits sort before letters, so page files (pages/<name>.css) always load last.
   Docs: docs/redesign/design/DESIGN_SYSTEM.md
   ========================================================================== */

/* ---------- Fonts: Switzer 400 / 400 italic / 500 (ITF Free Font License,
   see app/assets/fonts/switzer-license-ITF-FFL.txt) ---------------------- */
@font-face { font-family: "Switzer"; src: url("/assets/switzer-400-511bc9c5.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Switzer"; src: url("/assets/switzer-400-italic-78077e00.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Switzer"; src: url("/assets/switzer-500-43309e60.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }

/* ---------- Tokens: light ------------------------------------------------ */
:root {
  color-scheme: light dark;

  /* Colour: two inks and a paper. No accent colour. */
  --paper: #ffffff;
  --ink: #1a1a1a;          /* 17.4:1. Text, primary button, focus ring */
  --grey: #949494;         /* display grey: 24px and up ONLY (3.0:1, AA large) */
  --grey-text: #6b6b6b;    /* small secondary text (5.3:1, AA) */
  --rule: #e2e2e2;         /* hairlines */
  --field: #f0f0f0;        /* the one surface: quiet button, placeholders */
  --signal: #d4380d;       /* the 24/7 dot only. Never text, never fills */
  --danger: #b42318;       /* form errors only (6.6:1) */
  --scrim: var(--paper);
  --img-filter: none;

  /* Type */
  --font: "Switzer", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --t-hero: clamp(2.125rem, 1.35rem + 2.9vw, 3.4375rem);  /* 34 → 55 */
  --t-xl: clamp(1.75rem, 1.2rem + 1.9vw, 2.5rem);         /* 28 → 40 */
  --t-l: clamp(1.375rem, 1.05rem + 1.1vw, 2rem);          /* 22 → 32 */
  --t-m: 1.25rem;                                         /* 20 */
  --t-body: 1rem;                                         /* 16 */
  --t-s: 0.875rem;                                        /* 14 */
  --lh-tight: 1.1;
  --lh-head: 1.18;
  --lh-body: 1.4;
  --track-display: -0.015em;
  --track-head: -0.01em;
  --track-body: 0.01em;

  /* Space */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px;
  --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px; --s-11: 192px;
  --row-end: clamp(64px, 8vw, 128px);   /* space below a .row */

  /* Grid: 12 columns (4 below 768px), 16px gaps. The outer gutter grows from 16px on
     phones to 48px on large desktops, and content stops at --max-width, centred. */
  --gutter: clamp(16px, 3.2vw, 48px);
  --max-width: 1760px;
  --col-gap: 16px;
  --header-h: 64px;

  --radius: 6px;            /* images and buttons only */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur: 320ms;
}

/* ---------- Tokens: dark. Two identical blocks, keep them in sync -------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --paper: #111111; --ink: #ececec; --grey: #7c7c7c; --grey-text: #a3a3a3;
    --rule: #2b2b2b; --field: #1f1f1f; --signal: #ff6a3d; --danger: #ff7b72;
    --scrim: var(--paper); --img-filter: brightness(0.9);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #111111; --ink: #ececec; --grey: #7c7c7c; --grey-text: #a3a3a3;
  --rule: #2b2b2b; --field: #1f1f1f; --signal: #ff6a3d; --danger: #ff7b72;
  --scrim: var(--paper); --img-filter: brightness(0.9);
}
:root[data-theme="light"] { color-scheme: light; }

/* ---------- Reset & base ------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + var(--s-6)); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0; min-height: 100dvh;
  background: var(--paper); color: var(--ink);
  font-family: var(--font); font-size: var(--t-body); font-weight: 400;
  line-height: var(--lh-body); letter-spacing: var(--track-body);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  font-synthesis-weight: none;
}
h1, h2, h3, h4, h5, h6, p, ul, ol, dl, dd, figure, blockquote, fieldset { margin: 0; }
h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: 500; letter-spacing: var(--track-head); line-height: var(--lh-head); text-wrap: balance; }
/* Sensible defaults for unclassed headings; components set their own sizes. */
h1 { font-size: var(--t-xl); line-height: 1.15; letter-spacing: var(--track-display); }
h2 { font-size: var(--t-l); }
h3 { font-size: var(--t-m); }
p, li, dd { text-wrap: pretty; overflow-wrap: break-word; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
img, svg, video { display: block; max-width: 100%; }
img, video { height: auto; }
img { filter: var(--img-filter); }
a { color: inherit; text-decoration: none; }
b, strong { font-weight: 500; }
small { font-size: var(--t-s); }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; }
table { border-collapse: collapse; }
hr { border: 0; border-top: 1px solid var(--rule); margin-block: var(--s-7); }
code, kbd, pre { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.9em; }
kbd { font: inherit; font-size: var(--t-s); color: var(--grey-text); }
abbr[title] { text-decoration: underline dotted; cursor: help; }
[hidden] { display: none !important; }
main:focus { outline: none; }

:focus { outline: none; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 2px; }
::selection { background: var(--ink); color: var(--paper); }

.skip-link {
  position: absolute; left: var(--gutter); top: -100px; z-index: 100;
  padding: 12px 16px; border-radius: var(--radius);
  background: var(--ink); color: var(--paper);
}
.skip-link:focus-visible { top: 12px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* ---------- Type classes ------------------------------------------------- */
.t-hero { font-size: var(--t-hero); line-height: var(--lh-tight); font-weight: 500; letter-spacing: var(--track-display); text-wrap: balance; }
.t-xl   { font-size: var(--t-xl); line-height: 1.2; font-weight: 500; letter-spacing: var(--track-display); }
.t-l    { font-size: var(--t-l); line-height: var(--lh-head); font-weight: 500; letter-spacing: var(--track-head); }
.t-m    { font-size: var(--t-m); line-height: 1.3; font-weight: 500; letter-spacing: var(--track-head); }
.t-s    { font-size: var(--t-s); line-height: 20px; }

/* ---------- Utilities ---------------------------------------------------- */
.grey { color: var(--grey); }                 /* display sizes only */
.muted, .text-muted, .text-secondary { color: var(--grey-text); }
.text-sm { font-size: var(--t-s); }
.tabular { font-variant-numeric: tabular-nums; }
.mt-4 { margin-block-start: var(--s-4); }
.mt-6 { margin-block-start: var(--s-6); }
.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}