/* ============================================================================
   IAmigable — design tokens (issue #40)
   Single source of truth for the "Sol" system, consumed by BOTH the public
   stylesheet (styles.css) and the admin console (admin/admin.css).
   Public values are canonical. Admin-only values get their OWN token names —
   never redeclare a shared name with a different value (that is how the
   --ok #246b3c / #3d7a4e drift happened).
   Load order everywhere: tokens.css → components.css → surface stylesheet.
   ========================================================================== */

/* Self-hosted Archivo (variable, latin + latin-ext). Same-origin → fast on
   low-end/slow connections, no render-blocking Google Fonts request, and
   CSP-clean (the admin default-src 'self' policy blocked the old @import).
   font-display: swap keeps text visible while the face loads. */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/assets/fonts/archivo/archivo-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: 'Archivo';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/assets/fonts/archivo/archivo-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;
}

:root {
  /* Brand — Sol: yellow is an ACCENT background; ink carries text/links. */
  --yellow: #ffc933;
  --yellow-soft: #f2b94b;
  --brand: #1a1512;        /* ink — primary UI color (links, buttons, borders) */
  --brand-dark: #000000;
  --brand-tint: #ffc933;   /* yellow accent fills (eyebrow, tint sections) */
  --accent: #ffc933;
  --accent-dark: #f2b94b;

  /* Ink & paper */
  --ink: #1a1512;
  --ink-soft: #5c5248;
  --ink-panel: #2b241e;    /* dark panel (demo box interior) */
  --paper: #fff9ee;        /* warm cream page */
  --paper-2: #ffffff;      /* white cards / alt sections */
  --line: #1a1512;         /* borders are ink, 2px */
  --line-soft: #e7dcc9;

  /* Semantic */
  --ok: #3d7a4e;
  --ok-tint: #6fcf8f;
  --warn: #c2552b;

  /* Type — base 18px is the accessibility floor (admin overrides --fs-base). */
  --fs-base: 18px;
  --fs-scale: 1;           /* JS "letra grande" toggle bumps this */
  --font: 'Archivo', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;

  /* Layout */
  --wrap: 860px;
  --radius: 16px;
  --gap: 1.1rem;
  /* Softened from hard offset blocks (6px 6px 0) to gentle blurred shadows —
     keeps depth without the brutalist "raw edge" feel. */
  --shadow: 0 6px 18px rgba(26, 21, 18, 0.12);
  --shadow-pop: 0 10px 26px rgba(26, 21, 18, 0.16), 0 2px 0 rgba(255, 201, 51, 0.5);

  /* Ops-surface + component tokens (distinct names — no public collisions) */
  --muted: #655b53;        /* admin muted text (public prose uses --ink-soft) */
  --danger: #a22b20;
  --danger-soft: #fff0ed;
  --ok-deep: #246b3c;      /* admin state green — NOT public --ok */
  --focus: #3b72e9;        /* shared focus ring */
  --line-mid: #d8cfc3;     /* table hairlines */
  --state-off: #958b81;    /* inactive state dot */
  --shadow-panel: 6px 6px 0 rgba(26, 21, 18, 0.14);
  --shadow-notice: 4px 4px 0 rgba(26, 21, 18, 0.18);
  --tap-min: 46px;         /* minimum tap target (a11y floor) */
  --btn-h: 56px;           /* .btn metrics — admin overrides to 46px / 8px */
  --btn-r: 12px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: calc(var(--fs-base) * var(--fs-scale));
  -webkit-text-size-adjust: 100%;
}