/* ═══════════════════════════════════════════════════════════════════════════
   Инфоцентр Tunisie.ru — design tokens
   Ported verbatim from the Tunisie.ru Design System (tokens/*.css).
   Values are NOT to be re-tuned here: they were sampled from assets/logo.svg
   and from the reference photograph assets/img/sidi-bou-said.jpg.

   LAYER ORDER IS DECLARED HERE, ONCE, FOR THE WHOLE THEME.
   Layer order is document-global and fixed by first appearance, so this line
   governs all six stylesheets regardless of <link> order.

   All theme CSS lives inside a layer. The admin's Custom CSS block and the
   ThemeSettings <style> block in base.html are deliberately UNLAYERED, and
   unlayered rules always beat layered ones regardless of specificity — so
   admin CSS wins automatically, forever, with no !important arms race.
   ═══════════════════════════════════════════════════════════════════════════ */
@layer tokens, reset, base, prose, layout, chrome, components, pages, utilities;

/* ── Webfonts ─────────────────────────────────────────────────────────────────
   Self-hosted rather than loaded from Google: the audience is Russian (where
   Google Fonts availability is unreliable) and the site runs a consent module.
   Variable woff2, subset-scoped by unicode-range so a Russian page pulls only
   the cyrillic + latin files. All three families are SIL OFL 1.1.
   @font-face sits outside @layer — at-rules are unaffected by the cascade.
   ───────────────────────────────────────────────────────────────────────── */
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url(../fonts/golos-text-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url(../fonts/golos-text-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url(../fonts/golos-text-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url(../fonts/jetbrains-mono-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url(../fonts/jetbrains-mono-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url(../fonts/jetbrains-mono-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Unbounded ships latin + cyrillic only: it sets the wordmark, hero titles and
   eyebrows, never running copy, so the 115 KB latin-ext subset is dead weight. */
@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 600 800;
  font-display: swap;
  src: url(../fonts/unbounded-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 600 800;
  font-display: swap;
  src: url(../fonts/unbounded-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --cat is registered so it can never inherit a garbage value and so it can
   transition. See the category map at the foot of this file. */
@property --cat {
  syntax: '<color>';
  inherits: true;
  initial-value: #0469bb;
}

@layer tokens {
  /* ── Colour ──────────────────────────────────────────────────────────────
     Two sources, no invention:
     1. assets/logo.svg — sun rings, palm fronds, sea waves, lifted verbatim.
     2. assets/img/sidi-bou-said.jpg — pixel-sampled. Umbrella cobalt #0469bb,
        sky #1382c9, sea #26c4da, pale sky #a8d8f0, palm shadow #1f6874.
     Cobalt leads, sea supports, sun accents, palm signals.
     ────────────────────────────────────────────────────────────────────── */
  :root {
    /* Медина / Medina cobalt — primary. 600 is the umbrella blue. */
    --cobalt-50:#eaf4fc;--cobalt-100:#cfe6f8;--cobalt-200:#a8d8f0;--cobalt-300:#6fbdea;
    --cobalt-400:#2b90d8;--cobalt-500:#1382c9;--cobalt-600:#0469bb;--cobalt-700:#04559a;
    --cobalt-800:#06427a;--cobalt-900:#08325c;--cobalt-950:#05203c;

    /* Море / Sea turquoise — secondary. 400 is the open water. */
    --sea-50:#e6fafc;--sea-100:#c2f2f7;--sea-200:#8ce6ef;--sea-300:#4fd6e5;
    --sea-400:#26c4da;--sea-500:#12a4bc;--sea-600:#0f8398;--sea-700:#1f6874;
    --sea-800:#14515e;--sea-900:#0f3d47;

    /* Солнце / Sun — accent. Straight off the logo's four rings. */
    --sun-50:#fffbe8;--sun-100:#fff3c2;--sun-200:#feef00;--sun-300:#ffd51b;
    --sun-400:#ffba37;--sun-500:#ffa800;--sun-600:#db8a00;--sun-700:#a86400;

    /* Пальма / Palm — signal green. Straight off the logo's fronds. */
    --palm-100:#e4f7e5;--palm-200:#8fc740;--palm-300:#2bc740;--palm-400:#0f9d6a;
    --palm-500:#008a60;--palm-600:#046b4c;--palm-700:#054f39;

    /* Штукатурка / Whitewash neutrals — cool-leaning, never pure grey. Every
       step carries a trace of cobalt so photos sit calmly on them. */
    --wash-0:#ffffff;--wash-50:#f7fafc;--wash-100:#eef3f7;--wash-200:#dde5ec;
    --wash-300:#c3cfd9;--wash-400:#94a5b3;--wash-500:#65788a;--wash-600:#44586a;
    --wash-700:#2a3b4a;--wash-800:#16232e;--wash-900:#0b141c;

    /* Флаг / Flag red — the Tunisian flag's own red. Errors and live badges. */
    --flag-red:#e70013;--flag-red-dark:#b3000f;--flag-red-50:#fdeaec;

    /* Semantic aliases — reach for THESE in components, not the scales above */
    --text-strong:var(--wash-800);
    --text-body:var(--wash-700);
    --text-muted:var(--wash-500);
    --text-faint:var(--wash-400);
    --text-inverse:var(--wash-0);
    --text-inverse-muted:rgba(255,255,255,.72);
    --text-link:var(--cobalt-700);
    --text-link-hover:var(--cobalt-500);
    --text-accent:var(--cobalt-600);

    --surface-page:var(--wash-50);
    --surface-card:var(--wash-0);
    --surface-sunken:var(--wash-100);
    --surface-inset:var(--wash-200);
    --surface-brand:var(--cobalt-600);
    --surface-brand-deep:var(--cobalt-900);
    --surface-brand-soft:var(--cobalt-50);
    --surface-sea-soft:var(--sea-50);
    --surface-sun-soft:var(--sun-50);
    --surface-overlay:rgba(11,20,28,.62);
    --surface-glass:rgba(255,255,255,.82);
    --surface-glass-dark:rgba(5,32,60,.55);

    --border-hairline:var(--wash-200);
    --border-strong:var(--wash-300);
    --border-brand:var(--cobalt-600);
    --border-on-dark:rgba(255,255,255,.16);
    --border-focus:var(--cobalt-500);

    /* Category families — one hue per taxonomy family. Readers navigate by
       colour. field_taxonomy_color in the Drupal source did exactly this job. */
    --cat-news:var(--cobalt-600);
    --cat-tourism:var(--sea-500);
    --cat-culture:var(--sun-600);
    --cat-nature:var(--palm-500);
    --cat-russia:var(--flag-red);
    --cat-events:var(--cobalt-400);

    --state-success:var(--palm-500);
    --state-success-soft:var(--palm-100);
    --state-warning:var(--sun-500);
    --state-warning-soft:var(--sun-50);
    --state-danger:var(--flag-red);
    --state-danger-soft:var(--flag-red-50);
    --state-info:var(--cobalt-600);
    --state-info-soft:var(--cobalt-50);

    /* Protection gradients — laid under text on full-bleed photography.
       Always bottom-up, always deep cobalt rather than neutral black, so the
       photo's sea and sky stay in the same family.
       NEVER put text on a photo without one. */
    --scrim-photo:linear-gradient(to top,rgba(5,32,60,.92) 0%,rgba(5,32,60,.70) 34%,rgba(5,32,60,.18) 68%,rgba(5,32,60,0) 100%);
    --scrim-photo-soft:linear-gradient(to top,rgba(5,32,60,.78) 0%,rgba(5,32,60,.28) 55%,rgba(5,32,60,0) 100%);
    --scrim-side:linear-gradient(to right,rgba(5,32,60,.88) 0%,rgba(5,32,60,.42) 52%,rgba(5,32,60,0) 100%);

    /* The ONE gradient allowed as a surface fill: sea to cobalt, the horizon
       line of the reference photo. Section headers and the footer. Once per
       page. Nothing else gets a gradient. */
    --gradient-horizon:linear-gradient(160deg,var(--sea-500) 0%,var(--cobalt-700) 62%,var(--cobalt-900) 100%);
  }

  /* ── Type ────────────────────────────────────────────────────────────────
     Unbounded — geometric display. Wordmark, hero titles, section eyebrows,
     big numbers. Never sets a paragraph, never sets a feed headline.
     Golos Text — humanist Cyrillic UI sans. Everything else.
     JetBrains Mono — data only: temperatures, flight numbers, prices.
     Both fallback stacks end in Verdana, which the Drupal theme used as its
     second font, so a webfont failure degrades to something the site knew.
     ────────────────────────────────────────────────────────────────────── */
  :root {
    --font-display:"Unbounded","Golos Text",Verdana,Geneva,sans-serif;
    --font-sans:"Golos Text","Helvetica Neue",Verdana,Geneva,sans-serif;
    --font-mono:"JetBrains Mono","SF Mono",Consolas,monospace;

    --fw-regular:400;--fw-medium:500;--fw-semibold:600;
    --fw-bold:700;--fw-extrabold:800;--fw-black:900;

    /* 1.25 major third above body, tightened at the top so long Russian
       headlines do not run away from the grid. */
    --text-3xs:11px;--text-2xs:12px;--text-xs:13px;--text-sm:14px;--text-base:16px;
    --text-md:17px;--text-lg:19px;--text-xl:22px;--text-2xl:26px;--text-3xl:32px;
    --text-4xl:40px;--text-5xl:52px;--text-6xl:66px;--text-7xl:84px;

    --lh-tight:1.06;--lh-snug:1.18;--lh-heading:1.28;
    --lh-normal:1.5;--lh-relaxed:1.65;--lh-loose:1.8;

    /* Unbounded is wide by default — negative tracking on display sizes only. */
    --ls-display:-.03em;--ls-heading:-.015em;--ls-normal:0;
    --ls-wide:.02em;--ls-label:.08em;--ls-eyebrow:.14em;

    --measure-prose:68ch;--measure-narrow:44ch;--measure-wide:82ch;

    /* Semantic roles */
    --type-wordmark-family:var(--font-display);
    --type-wordmark-weight:var(--fw-extrabold);
    --type-wordmark-tracking:-.04em;

    --type-hero-family:var(--font-display);
    --type-hero-size:var(--text-6xl);
    --type-hero-weight:var(--fw-bold);
    --type-hero-lh:var(--lh-tight);
    --type-hero-ls:var(--ls-display);

    --type-display-family:var(--font-display);
    --type-display-size:var(--text-4xl);
    --type-display-weight:var(--fw-semibold);
    --type-display-lh:var(--lh-snug);

    /* Section labels: Unbounded, small, uppercase, wide. The one place the
       display face appears at text size. */
    --type-eyebrow-family:var(--font-display);
    --type-eyebrow-size:var(--text-2xs);
    --type-eyebrow-weight:var(--fw-semibold);
    --type-eyebrow-ls:var(--ls-eyebrow);
    --type-eyebrow-transform:uppercase;

    --type-headline-family:var(--font-sans);
    --type-headline-size:var(--text-2xl);
    --type-headline-weight:var(--fw-bold);
    --type-headline-lh:var(--lh-heading);
    --type-headline-ls:var(--ls-heading);

    --type-title-family:var(--font-sans);
    --type-title-size:var(--text-lg);
    --type-title-weight:var(--fw-semibold);
    --type-title-lh:var(--lh-heading);

    --type-body-family:var(--font-sans);
    --type-body-size:var(--text-base);
    --type-body-weight:var(--fw-regular);
    --type-body-lh:var(--lh-relaxed);

    /* Article body runs one step up — these are long reads. */
    --type-prose-size:var(--text-md);
    --type-prose-lh:var(--lh-loose);

    --type-meta-family:var(--font-sans);
    --type-meta-size:var(--text-xs);
    --type-meta-weight:var(--fw-medium);
    --type-meta-lh:var(--lh-normal);

    --type-data-family:var(--font-mono);
    --type-data-size:var(--text-sm);
    --type-data-weight:var(--fw-medium);
    --type-data-ls:var(--ls-normal);
  }

  /* ── Spacing & layout ────────────────────────────────────────────────────
     4px base. The Drupal source ran on Bootstrap 3's 1170px container with a
     30px gutter; both numbers are kept verbatim so the rebuild lands on the
     same grid the existing content was written for.
     ────────────────────────────────────────────────────────────────────── */
  :root {
    --space-0:0;--space-px:1px;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;
    --space-5:20px;--space-6:24px;--space-7:30px;--space-8:36px;--space-9:44px;
    --space-10:56px;--space-11:72px;--space-12:96px;--space-13:128px;--space-14:160px;

    --container-max:1170px;
    --container-wide:1440px;
    --container-prose:740px;
    --gutter:30px;
    --gutter-tight:20px;

    --section-gap:var(--space-11);
    --section-gap-tight:var(--space-9);
    --block-gap:var(--space-7);
    --card-pad:var(--space-6);
    --card-pad-tight:var(--space-5);
    --card-gap:var(--space-3);

    /* Fixed chrome. The masthead pins on scroll; nothing else does. */
    --header-h:76px;
    --header-h-compact:60px;
    --topbar-h:38px;
    --sidebar-w:330px;

    --z-base:0;--z-raised:10;--z-sticky:100;--z-header:200;
    --z-drawer:300;--z-overlay:400;--z-toast:500;

    --tap-min:44px;
    --breakpoint-sm:576px;--breakpoint-md:768px;
    --breakpoint-lg:992px;--breakpoint-xl:1200px;
  }

  /* ── Corner radii ────────────────────────────────────────────────────────
     Restrained. Cards get 4px — the whitewashed architecture in the reference
     photo is plaster-soft but essentially square, and news content wants to
     read as documents, not app tiles. Only two things go fully round.
     ────────────────────────────────────────────────────────────────────── */
  :root {
    --radius-none:0;--radius-xs:2px;--radius-sm:3px;--radius-md:4px;
    --radius-lg:6px;--radius-xl:10px;
    --radius-dome:14px 14px 0 0;   /* the Sidi Bou Said dome — hero cards only */
    --radius-pill:999px;--radius-round:50%;

    --radius-card:var(--radius-md);
    --radius-media:var(--radius-md);
    --radius-input:var(--radius-md);
    --radius-button:var(--radius-md);
    --radius-badge:var(--radius-pill);
    --radius-avatar:var(--radius-round);
    --radius-modal:var(--radius-lg);

    --border-w-hair:1px;--border-w-thick:2px;--border-w-rule:3px;
  }

  /* ── Elevation ───────────────────────────────────────────────────────────
     Shadows are cool, tinted with the deep cobalt (never neutral black), and
     shallow — cards read as sheets of paper on plaster. There is no
     inner-shadow system; recessed fields use --surface-sunken + a hairline.
     ────────────────────────────────────────────────────────────────────── */
  :root {
    --shadow-none:none;
    --shadow-hairline:0 0 0 1px var(--border-hairline);
    --shadow-card:0 1px 2px rgba(5,32,60,.05),0 2px 8px rgba(5,32,60,.05);
    --shadow-card-hover:0 2px 4px rgba(5,32,60,.07),0 10px 26px rgba(5,32,60,.11);
    --shadow-raised:0 4px 14px rgba(5,32,60,.10);
    --shadow-dropdown:0 8px 28px rgba(5,32,60,.16);
    --shadow-modal:0 24px 70px rgba(5,32,60,.28);
    --shadow-header:0 1px 0 var(--border-hairline),0 4px 18px rgba(5,32,60,.07);
    --shadow-media:0 10px 30px rgba(5,32,60,.14);

    /* Focus is a two-part ring: white gap, then cobalt. Survives on photos. */
    --ring-focus:0 0 0 2px var(--wash-0),0 0 0 4px var(--cobalt-500);
    --ring-focus-inverse:0 0 0 2px rgba(5,32,60,.6),0 0 0 4px var(--sea-300);

    /* Blur is rare — chrome sitting over photography only. */
    --blur-chrome:saturate(140%) blur(14px);
    --blur-capsule:saturate(120%) blur(8px);
  }

  /* ── Motion ──────────────────────────────────────────────────────────────
     Quiet. This is a reading site: content never slides in, nothing bounces.
     Motion acknowledges a pointer or a state change, nothing more. The Drupal
     theme's AOS scroll-reveal library is deliberately NOT carried over — a
     headline should be readable the instant it paints.
     ────────────────────────────────────────────────────────────────────── */
  :root {
    --dur-instant:80ms;--dur-fast:140ms;--dur-base:220ms;
    --dur-slow:340ms;--dur-photo:600ms;

    --ease-standard:cubic-bezier(.4,0,.2,1);
    --ease-out:cubic-bezier(.16,1,.3,1);
    --ease-in:cubic-bezier(.4,0,1,1);
    --ease-photo:cubic-bezier(.2,.6,.2,1);

    --transition-color:color var(--dur-fast) var(--ease-standard),background-color var(--dur-fast) var(--ease-standard),border-color var(--dur-fast) var(--ease-standard);
    --transition-card:box-shadow var(--dur-base) var(--ease-standard),transform var(--dur-base) var(--ease-out);
    --transition-photo:transform var(--dur-photo) var(--ease-photo);

    /* Interaction contract — components must not improvise past these. */
    --hover-lift:-2px;              /* used as translateY(var(--hover-lift)) */
    --hover-photo-scale:1.04;
    --press-sink:1px;
    --press-scale:.985;
    --disabled-opacity:.45;
  }

  @media (prefers-reduced-motion:reduce) {
    :root {
      --dur-instant:0ms;--dur-fast:0ms;--dur-base:0ms;
      --dur-slow:0ms;--dur-photo:0ms;
      --hover-lift:0px;--hover-photo-scale:1;--press-sink:0px;--press-scale:1;
    }
  }

  /* ── Category colour map ─────────────────────────────────────────────────
     oCMS has no colour field on a category, so the mapping lives here, keyed
     on category slug, and is applied to markup as data-cat="{{.Slug}}".

     Deliberately INDIRECT: these rules set --cat, they never paint. CSS has no
     "attribute value not in this set" selector, so painting directly from
     [data-cat=…] would leave no expressible fallback. Because --cat is a
     normally-inherited registered property with a :root value, an unknown or
     missing slug matches nothing and simply inherits — the page default in a
     mixed feed, or the section's own colour inside a category archive
     (<main data-cat="…">). Every consumer reads var(--cat) and never names a
     category.

     Covers all 25 categories imported from the Drupal site. New categories
     need one line here; until then they inherit, which is correct-looking.
     ────────────────────────────────────────────────────────────────────── */
  :root { --cat: var(--cat-news); }

  /* Новости — cobalt */
  [data-cat="news"],
  [data-cat="novosti-saita"],
  [data-cat="pressa-o-tunise"]                  { --cat: var(--cat-news); }

  /* Туризм — sea */
  [data-cat="turizm"],
  [data-cat="tourism"],
  [data-cat="goroda-i-kurorty"],
  [data-cat="luchshie-oteli"],
  [data-cat="doroga-v-tunis"],
  [data-cat="talassoterapiia"],
  [data-cat="predlozheniia-luchshikh-turfirm"]  { --cat: var(--cat-tourism); }

  /* Культура — sun */
  [data-cat="culture"],
  [data-cat="istoriia-tunisa"],
  [data-cat="tunisskaia-kukhnia"],
  [data-cat="iumor"],
  [data-cat="vashi-rasskazy"],
  [data-cat="music"]                            { --cat: var(--cat-culture); }

  /* Информация о стране — palm */
  [data-cat="priroda-tunisa"],
  [data-cat="pogoda-v-tunise"],
  [data-cat="informatsiia-o-tunise"]            { --cat: var(--cat-nature); }

  /* Тунис и Россия — flag red */
  [data-cat="tunis-i-rossiia"],
  [data-cat="tunis-v-rossii"],
  [data-cat="rossiia-v-tunise"]                 { --cat: var(--cat-russia); }

  /* События — light cobalt */
  [data-cat="sobytiia"],
  [data-cat="sport"],
  [data-cat="tekhnologii"]                      { --cat: var(--cat-events); }

  /* Editor-assignable override: set a menu item's CSS class to cat-tourism
     etc. in admin to colour it without a code change. */
  .cat-news    { --cat: var(--cat-news); }
  .cat-tourism { --cat: var(--cat-tourism); }
  .cat-culture { --cat: var(--cat-culture); }
  .cat-nature  { --cat: var(--cat-nature); }
  .cat-russia  { --cat: var(--cat-russia); }
  .cat-events  { --cat: var(--cat-events); }
}