/**
 * Shell-iT — Proof Mode design tokens
 *
 * Values come from the approved design system (02-design-system.md).
 * Nothing in this file may be overridden with a hard-coded literal elsewhere.
 *
 * THESE ARE NOW THE FALLBACK, NOT THE LIVE VALUES.
 *
 * The palette, type scale, spacing scale, container widths and radii are also
 * declared in a GenerateBlocks global style whose selector is `:root`, and GB
 * prints its stylesheet after this one — so GB wins wherever both define the
 * same custom property. That is deliberate: it is what lets Malvina change the
 * brand colours, the type scale and the spacing rhythm from the block editor
 * without touching CSS or waiting for a developer.
 *
 * Verified rather than assumed: GB prints its global styles on every page,
 * including routes that contain no GenerateBlocks blocks at all (checked on
 * /blog/), so the templates that still run on this stylesheet get the same
 * values as the converted pages.
 *
 * What this file is still for:
 *   - the values the site falls back to if GenerateBlocks is ever deactivated
 *   - the tokens GB does NOT carry (motion, semantic status colours, the
 *     mono font stack, breakpoint-scoped overrides further down this file)
 *
 * If you change a value here, change it in the `:root` global style too, or
 * the change will appear to do nothing on the live site.
 *
 * THREE TOKENS MUST NEVER BE PUT BACK INTO THE GB GLOBAL STYLE.
 *
 * `--page-gutter`, `--grid-gap` and `--hero-measure` are not flat values: they
 * step down at 1199 / 768 / 390, and `--hero-measure` widens for Greek. A GB
 * global style is a single unconditional `:root` block printed after this
 * file, so declaring them there silently deleted every one of those steps —
 * the whole site rendered with a 48px gutter at 390px instead of 16px (284px
 * of usable width on a phone), and Greek headlines were held to the English
 * 16ch measure. It looked like a booking-page problem and was a site-wide one.
 *
 * The rule that follows from that: GB carries values a person would want to
 * change — colour, type scale, spacing rhythm, radii. Anything whose correct
 * value depends on viewport or language stays here, where it can have the
 * conditions it needs.
 */

:root {
  /* ---------------------------------------------------------------- COLOUR */

  /* Brand */
  --color-brand-navy: #1c244b;
  --color-brand-slate: #324a6d;
  --color-brand-blue: #3c58a8;
  --color-interactive: #496bcb;
  --color-accent: #f89a3a;
  --color-accent-hover: #e8811e;

  /*
   * The accent, dark enough to be TEXT on a light surface.
   *
   * #F89A3A is a surface and border colour. As small text on white it measures
   * 2.17:1 — the design system already records that it cannot carry white text
   * at AA, and the inverse is just as true: it cannot BE text on white either.
   * The process ordinals and the service-brief ordinals were both failing at
   * roughly 2:1, on every page that shows them.
   *
   * 62% of the accent keeps the hue and clears 4.5:1 on all three light
   * surfaces — white 5.19, canvas 4.92, sunken 4.61 — with the sunken surface
   * as the binding constraint. Measured, not chosen by eye.
   *
   * On DARK surfaces the accent needs no help and keeps its full value; see
   * `.proof-panel__link:hover` and the footer.
   */
  --color-accent-text: #9a5f24;
  --color-ink: #000408;

  /* Surfaces */
  --color-page: #f7f9fc;
  --color-surface-raised: #ffffff;
  --color-surface-sunken: #eef2f7;
  --color-panel: #1c244b;
  --color-panel-inverse: #000408;

  /* Borders */
  --color-border-subtle: #d9e0ea;
  --color-border-strong: #7a879a;
  --color-border-inverse: rgb(255 255 255 / 14%);

  /* Text */
  --color-text-primary: #000408;
  --color-text-secondary: #46546a;
  --color-text-muted: #5d6b80;
  --color-text-inverse: #ffffff;
  --color-text-inverse-secondary: #c6d0e0;

  /* Links */
  --color-link: #3c58a8;
  --color-link-hover: #2f478b;

  /* Focus — dual layer: white separation inside, blue ring outside */
  --color-focus-ring: #496bcb;
  --color-focus-gap: #ffffff;

  /* Controls */
  --control-bg: #496bcb;
  --control-bg-hover: #3c58a8;
  --control-bg-active: #324a6d;
  --control-disabled-bg: #eef2f7;
  --control-disabled-text: #5d6b80;

  /* Semantic — deliberately outside the brand palette so status stays legible */
  --color-success: #176b45;
  --color-success-bg: #eaf7f0;
  --color-warning: #8a4b00;
  --color-warning-bg: #fff4de;
  --color-error: #b42318;
  --color-error-bg: #fff0ee;
  --color-info: #2855a7;
  --color-info-bg: #edf3ff;

  /* ------------------------------------------------------------ TYPOGRAPHY */

  /* "Roboto Flex" first so a genuine variable build, once uploaded, takes over
     from the static Roboto instances without a code change. See 00-fonts.css. */
  --font-display: "Roboto Flex", "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-text: "Noto Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  /*
   * The technical register.
   *
   * Metadata — counts, dates, project types, filter labels — is set in
   * monospace. It is the cheapest honest way to make an engineering practice
   * look like one: it says "this is data" rather than decorating the page with
   * pictures of code. Deliberately a system stack, so it costs nothing to load
   * and never becomes a third webfont. Every family listed carries Greek.
   */
  --font-mono: ui-monospace, "Cascadia Mono", "Segoe UI Mono", "Liberation Mono", Menlo, Consolas, "DejaVu Sans Mono", monospace;

  --type-display-xl: clamp(3.75rem, 2.2rem + 3.2vw, 5.75rem);
  --type-display-lg: clamp(3.25rem, 2.2rem + 2.3vw, 4.5rem);
  --type-h1: clamp(2.75rem, 2.1rem + 1.6vw, 4rem);
  --type-h2: clamp(2.25rem, 1.85rem + 1vw, 3rem);
  --type-h3: clamp(1.75rem, 1.5rem + 0.7vw, 2.25rem);
  --type-h4: clamp(1.375rem, 1.2rem + 0.4vw, 1.625rem);
  --type-h5: clamp(1.125rem, 1.05rem + 0.2vw, 1.25rem);
  --type-h6: 1rem;
  --type-body-lg: clamp(1.0625rem, 1rem + 0.2vw, 1.125rem);
  --type-body: 1rem;
  --type-body-sm: 0.875rem;
  --type-caption: 0.8125rem;
  --type-micro: 0.75rem;

  /* Reading measures — Greek body copy targets 58–68ch */
  --measure-body: 68ch;
  --measure-lead: 60ch;
  --measure-caption: 72ch;

  /* Headline measure. Greek runs 20–40% longer, so :lang(el) widens it. */
  --hero-measure: 16ch;

  /* ---------------------------------------------------------------- SPACE */

  --space-0: 0;
  --space-0-5: 0.25rem;   /*   4px — half-step, compact internal alignment only */
  --space-1: 0.5rem;      /*   8px */
  --space-1-5: 0.75rem;   /*  12px */
  --space-2: 1rem;        /*  16px */
  --space-3: 1.5rem;      /*  24px */
  --space-4: 2rem;        /*  32px */
  --space-5: 2.5rem;      /*  40px */
  --space-6: 3rem;        /*  48px */
  --space-8: 4rem;        /*  64px */
  --space-10: 5rem;       /*  80px */
  --space-12: 6rem;       /*  96px */
  --space-15: 7.5rem;     /* 120px */
  --space-20: 10rem;      /* 160px */

  /* --------------------------------------------------------------- LAYOUT */

  --container-wide: 90rem;      /* 1440px */
  --container-default: 80rem;   /* 1280px */
  --container-reading: 47.5rem; /*  760px */
  --container-narrow: 40rem;    /*  640px */

  --page-gutter: 3rem;          /* ≥1200px */
  --grid-columns: 12;
  --grid-gap: 1.5rem;

  --header-height: 5rem;        /* 80px desktop */
  --header-height-mobile: 4rem; /* 64px */

  /* ---------------------------------------------------------------- SHAPE */

  --radius-xs: 0.25rem;
  --radius-sm: 0.5rem;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;
  --radius-pill: 999px;

  --shadow-none: none;
  --shadow-sm: 0 1px 2px rgb(0 4 8 / 8%);
  --shadow-md: 0 8px 24px rgb(0 4 8 / 8%);
  --shadow-overlay: 0 16px 40px rgb(0 4 8 / 14%);

  /* --------------------------------------------------------------- MOTION */

  --motion-instant: 0ms;
  --motion-fast: 120ms;
  --motion-standard: 180ms;
  --motion-slow: 280ms;
  --motion-panel: 360ms;

  --ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  /* ----------------------------------------------------------------- ICON */

  --icon-xs: 1rem;
  --icon-sm: 1.25rem;
  --icon-md: 1.5rem;
  --icon-lg: 2rem;

  /* ------------------------------------------------------------- Z-INDEX */

  --z-base: 1;
  --z-sticky: 100;
  --z-header: 1000;
  --z-overlay: 1100;
  --z-drawer: 1200;
  --z-skip-link: 9999;
}

/* Greek headlines get a wider measure so the English composition never dictates
   Greek line breaks. Design-system choice, not an accessibility requirement. */
:root:lang(el),
[lang="el"] {
  --hero-measure: 19ch;
}

/* Gutters step down with the viewport. */
@media (max-width: 1199px) {
  :root { --page-gutter: 2rem; }   /* 32px */
}

@media (max-width: 768px) {
  :root {
    --page-gutter: 1.5rem;         /* 24px */
    --grid-columns: 8;
    --grid-gap: 1.25rem;           /* 20px */
  }
}

@media (max-width: 390px) {
  :root {
    --page-gutter: 1rem;           /* 16px */
    --grid-columns: 4;
    --grid-gap: 1rem;              /* 16px */
  }
}