@charset "UTF-8";
/*!
 * Hash v1.0.0 — Theme Layer (tokens, type scale, surfaces)
 *
 * WHY THIS FILE EXISTS
 * ---------------------------------------------------------------------------
 * Reading 12 of our projects, every single one re-declared the same block:
 *   font scale + colour list + font weights + radius + shadow
 *   + .heading-1..3 / .text-1..3 / .text-xs..lg / .fw-* / .btn-primary
 *   + .btn-ghost / .card / .badge / .custom-scrollbar / .icon-box
 * That is roughly 250-400 lines rewritten per project, with slightly different
 * names each time (text-heading vs heading-xs vs para-1). This file is that
 * block, once, driven entirely by CSS variables.
 *
 * HOW TO USE
 *   1. Link hash.css, then hash-theme.css, then your style.css.
 *   2. In style.css, override only the tokens under "THEME CONFIG".
 *      Nothing else. Do not copy this file into the project.
 *
 * Load order: hash.css > hash-theme.css > hash-ui.css > hash-motion.css > style.css
 */

@layer theme {
  /*
  ====================================================================
    THEME CONFIG — the only block a project should override
  ====================================================================
  */
  :root {
    /* -- Type families ---------------------------------------------------- */
    --font-primary: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-display: var(--font-primary);
    --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

    /* -- Type scale (fluid). 1rem = 10px because of the 62.5% root. ------- */
    --fs-1: 1rem;                                     /* 10px  micro       */
    --fs-2: 1.2rem;                                   /* 12px  caption     */
    --fs-3: 1.4rem;                                   /* 14px  small       */
    --fs-4: 1.6rem;                                   /* 16px  body        */
    --fs-5: 1.8rem;                                   /* 18px  body large  */
    --fs-6: clamp(2rem, 0.6vw + 1.8rem, 2.4rem);      /* h3                */
    --fs-7: clamp(2.6rem, 1.4vw + 2rem, 3.4rem);      /* h2                */
    --fs-8: clamp(3.4rem, 3vw + 2rem, 5.6rem);        /* h1                */

    /* 0.6.9 aliases so old style.css keeps resolving */
    --font-size1: var(--fs-1);
    --font-size2: var(--fs-2);
    --font-size3: var(--fs-3);
    --font-size4: var(--fs-4);
    --font-size5: var(--fs-5);
    --font-size6: var(--fs-6);
    --font-size7: var(--fs-7);

    --lh-tight: 1.2;
    --lh-snug: 1.4;
    --lh-body: 1.7;

    /* -- Weights ----------------------------------------------------------- */
    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;
    --fw-extrabold: 800;

    /* -- Brand ramp -------------------------------------------------------- */
    --brand-50: #f0f0ff;
    --brand-100: #dfdfff;
    --brand-200: #d7cffb;
    --brand-300: #c4b8f5;
    --brand-400: #9f81ed;
    --brand-500: #9c7cec;
    --brand-600: #8b5cf6;
    --brand-700: #6c3fe0;
    --brand-800: #513d9c;

    /* -- Semantic slots — components only ever read these ------------------ */
    --bg: #eae6f7;
    --surface: #ffffff;
    --surface-2: #f3f1ff;
    --surface-3: #ede9f8;
    --line: #ddd6f3;
    --line-strong: #c4b8f5;

    --ink: #353538;          /* headings */
    --ink-2: #5e5e61;        /* body     */
    --muted: #848389;        /* captions */
    --on-brand: #fdfdff;     /* text on a brand fill */

    --brand: var(--brand-500);
    --brand-ink: var(--brand-700);
    /* The ghost tint is derived from the brand and the current surface, so it
       follows the colour band AND dark mode without either having to declare
       it — a band and a mode have equal specificity, and whichever came last
       used to win. The first value is the fallback for browsers without
       color-mix. */
    --brand-ghost: var(--brand-50);
    --brand-ghost: color-mix(in srgb, var(--brand) 14%, var(--surface));

    --ok: #2bc86d;
    --ok-bg: #e9f9ef;
    --warn: #fbbe06;
    --warn-bg: #fff9e6;
    --danger: #ff7052;
    --danger-bg: #fff0ed;
    --info: #2e60d9;
    --info-bg: #ebeffa;

    /* -- Radius ------------------------------------------------------------ */
    --rad-xs: 0.8rem;
    --rad-sm: 1.2rem;
    --rad-md: 1.6rem;
    --rad-lg: 2.4rem;
    --rad-pill: 999rem;
    --rad-circle: 50%;

    /* -- Elevation --------------------------------------------------------- */
    --shadow-1: 0 1px 6px rgba(80, 40, 180, 0.07);
    --shadow-2: 0 4px 20px rgba(80, 40, 180, 0.13);
    --shadow-3: 0 12px 40px rgba(80, 40, 180, 0.18);
    --shadow-brand: 0 4px 14px rgba(108, 63, 224, 0.32);

    /* -- Controls ---------------------------------------------------------- */
    --control-h: 4.4rem;
    --control-pad: 1.2rem 2rem;
    --field-bg: var(--surface);
    --field-border: var(--line);
  }

  /* Dark mode is a separate axis from the colour band, so the two combine:
     <html data-theme="green" data-mode="dark">.  data-theme="dark" is
     accepted too, for pages already written that way. */
  :root[data-mode="dark"],
  :root[data-theme="dark"] {
    --bg: #17141f;
    --surface: #1f1b2b;
    --surface-2: #262035;
    --surface-3: #2e2740;
    --line: #362e4a;
    --line-strong: #4a3f68;
    --ink: #f4f2fb;
    --ink-2: #cdc7dd;
    --muted: #9a93ad;
    --shadow-1: 0 1px 6px rgba(0, 0, 0, 0.4);
    --shadow-2: 0 4px 20px rgba(0, 0, 0, 0.45);
    --shadow-3: 0 12px 40px rgba(0, 0, 0, 0.5);
  }

  /* Browsers without color-mix keep a usable dark ghost tint */
  @supports not (color: color-mix(in srgb, red, blue)) {
    :root[data-mode="dark"],
    :root[data-theme="dark"] { --brand-ghost: #2a2140; }
  }

  /*
  ====================================================================
    PALETTE CONTRACT  (the "band" system, formalised)
    Logic Series carried five colour bands as 800+ lines of per-band
    background/border rules. A band is a token remap, nothing more.

      <html data-theme="green">        or   Hash.theme('green')

    Add your own band by copying one block into style.css. Only these
    six tokens ever change — every component reads them.
  ====================================================================
  */
  :root[data-theme="green"] {
    --brand-500: #2bc86d;
    --brand-600: #22b25f;
    --brand-700: #178048;
    --brand: var(--brand-500);
    --brand-ink: var(--brand-700);
  }
  :root[data-theme="blue"] {
    --brand-500: #4b78ff;
    --brand-600: #2e60d9;
    --brand-700: #1f47ab;
    --brand: var(--brand-500);
    --brand-ink: var(--brand-700);
  }
  :root[data-theme="orange"] {
    --brand-500: #fb8f08;
    --brand-600: #e97c00;
    --brand-700: #a85800;
    --brand: var(--brand-500);
    --brand-ink: var(--brand-700);
  }
  :root[data-theme="pink"] {
    --brand-500: #f782d0;
    --brand-600: #e45fb8;
    --brand-700: #a83585;
    --brand: var(--brand-500);
    --brand-ink: var(--brand-700);
  }

  /*
  ====================================================================
    ELEMENT DEFAULTS
  ====================================================================
  */
  body {
    font-family: var(--font-primary);
    font-size: var(--fs-4);
    line-height: var(--lh-body);
    color: var(--ink-2);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
  }

  h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    color: var(--ink);
    line-height: var(--lh-tight);
    font-weight: var(--fw-bold);
  }
  h1 { font-size: var(--fs-8); }
  h2 { font-size: var(--fs-7); }
  h3 { font-size: var(--fs-6); }
  h4 { font-size: var(--fs-5); }
  h5 { font-size: var(--fs-4); }
  h6 { font-size: var(--fs-3); }

  a { color: var(--brand-ink); text-decoration: none; }
  a:hover { color: var(--brand-600); }

  ::selection { background: var(--brand-200); color: var(--ink); }

  /*
  ====================================================================
    TYPE CLASSES
    Left column = the name we already use in projects.
    Everything is an alias family so old markup keeps rendering.
  ====================================================================
  */
  .heading-1, .h-1 { font-size: var(--fs-8); font-weight: var(--fw-bold); color: var(--ink); line-height: var(--lh-tight); }
  .heading-2, .h-2 { font-size: var(--fs-7); font-weight: var(--fw-bold); color: var(--ink); line-height: var(--lh-tight); }
  .heading-3, .h-3 { font-size: var(--fs-6); font-weight: var(--fw-bold); color: var(--ink); line-height: var(--lh-snug); }
  .heading-4, .h-4 { font-size: var(--fs-5); font-weight: var(--fw-semibold); color: var(--ink); line-height: var(--lh-snug); }
  .heading-xs { font-size: var(--fs-3); font-weight: var(--fw-semibold); color: var(--ink); line-height: var(--lh-snug); }

  /* Body / paragraph ladder (para-* is the marketing-site name we used) */
  .text-1, .para-1 { font-size: var(--fs-4); font-weight: var(--fw-medium); color: var(--ink); }
  .text-2, .para-2 { font-size: var(--fs-3); font-weight: var(--fw-medium); color: var(--muted); }
  .text-3, .para-3 { font-size: var(--fs-2); font-weight: var(--fw-medium); color: var(--muted); }

  /* Size-only helpers — combine with .fw-* and .text-{colour} */
  .text-xs { font-size: var(--fs-1); }
  .text-sm { font-size: var(--fs-3); }
  .text-md { font-size: var(--fs-4); }
  .text-lg { font-size: var(--fs-5); }
  .text-xl { font-size: var(--fs-6); }

  .fw-regular { font-weight: var(--fw-regular); }
  .fw-medium { font-weight: var(--fw-medium); }
  .fw-semibold { font-weight: var(--fw-semibold); }
  .fw-bold { font-weight: var(--fw-bold); }
  .fw-extrabold { font-weight: var(--fw-extrabold); }

  .lh-tight { line-height: var(--lh-tight); }
  .lh-snug { line-height: var(--lh-snug); }
  .lh-body { line-height: var(--lh-body); }

  .font-display { font-family: var(--font-display); }
  .font-mono { font-family: var(--font-mono); }

  /* Colour helpers — semantic first, literal second */
  .text-heading { color: var(--ink); }
  .text-body { color: var(--ink-2); }
  .text-muted { color: var(--muted); }
  .text-brand { color: var(--brand-ink); }
  .text-on-brand, .text-white-smoke { color: var(--on-brand); }
  .text-white { color: #fff; }
  .text-ok { color: var(--ok); }
  .text-warn { color: var(--warn); }
  .text-danger { color: var(--danger); }
  .text-info { color: var(--info); }
  .text-inherit { color: inherit; }

  /* Gradient / highlight word inside a heading */
  .text-gradient {
    background: linear-gradient(90deg, var(--brand-600), var(--brand-400));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
  .heading-coloured { color: var(--brand-ink); }

  /*
  ====================================================================
    SURFACES
  ====================================================================
  */
  .bg-surface { background: var(--surface); }
  .bg-surface-2 { background: var(--surface-2); }
  .bg-surface-3 { background: var(--surface-3); }
  .bg-brand { background: var(--brand); color: var(--on-brand); }
  .bg-ghost { background: var(--brand-ghost); }
  .bg-ok { background: var(--ok-bg); }
  .bg-warn { background: var(--warn-bg); }
  .bg-danger { background: var(--danger-bg); }
  .bg-info { background: var(--info-bg); }
  .bg-none { background: none; }

  /* Background image block — 0.6.9 shipped this in style.css, now standard.
     <div class="bg" style="--imgBg:url(img/hero.webp); --imgBgHeight:60vh"> */
  .bg {
    width: 100%;
    height: var(--imgBgHeight, 100vh);
    background-image: var(--imgBg, none);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: var(--imgBgPos, center);
  }

  .rad-xs { border-radius: var(--rad-xs); }
  .rad-sm { border-radius: var(--rad-sm); }
  .rad-md { border-radius: var(--rad-md); }
  .rad-lg { border-radius: var(--rad-lg); }
  .rad-pill { border-radius: var(--rad-pill); }
  .rad-circle { border-radius: var(--rad-circle); }

  .shadow-1 { box-shadow: var(--shadow-1); }
  .shadow-2 { box-shadow: var(--shadow-2); }
  .shadow-3 { box-shadow: var(--shadow-3); }
  .shadow-no { box-shadow: none; }

  .line-all { border: 1px solid var(--line); }
  .line-top, .bordertop { border-top: 1px solid var(--line); }
  .line-bottom, .borderbottom { border-bottom: 1px solid var(--line); }
  .line-left { border-left: 1px solid var(--line); }
  .line-right { border-right: 1px solid var(--line); }
  .line-primary { border-color: var(--brand); }

  /* Card — the shape every project rebuilt.
     --card-pad is re-declared on the element so a card nested inside another
     card does not inherit its padding. Inline style and project rules win. */
  .card {
    --card-pad: 2rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--rad-md);
    padding: var(--card-pad);
  }
  .card-flat { border: 0; box-shadow: none; }
  .card-raise { box-shadow: var(--shadow-2); border-color: transparent; }

  .tile {
    --tile-pad: 1.6rem;
    background: var(--surface-2);
    border-radius: var(--rad-sm);
    padding: var(--tile-pad);
  }

  .icon-box {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: var(--icon-size, 4rem);
    height: var(--icon-size, 4rem);
    border-radius: var(--rad-sm);
    flex: 0 0 auto;
  }
  .icon-box svg,
  .icon-box img { width: var(--icon-inner, 60%); height: auto; }
  .icon-fill { fill: currentColor; }
  .icon-stroke { stroke: currentColor; fill: none; }

  /* flex-shrink: 0 — a badge put in a flex row beside a sentence is a
     flex item, and by default it compresses below its own content. Its
     label is usually one unbreakable word, so it does not wrap: it
     spills out of the pill and over whatever follows. */
  .badge {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    gap: 0.6rem;
    padding: 0.4rem 1.2rem;
    border-radius: var(--rad-pill);
    font-size: var(--fs-2);
    font-weight: var(--fw-semibold);
    background: var(--brand-ghost);
    color: var(--brand-ink);
    line-height: 1.6;
  }
  .badge-ok { background: var(--ok-bg); color: var(--ok); }
  .badge-warn { background: var(--warn-bg); color: #a97a00; }
  .badge-danger { background: var(--danger-bg); color: var(--danger); }

  .avatar {
    width: var(--avatar-size, 4rem);
    height: var(--avatar-size, 4rem);
    border-radius: var(--rad-circle);
    object-fit: cover;
    flex: 0 0 auto;
  }

  /*
  ====================================================================
    BUTTONS
  ====================================================================
  */
  .btn,
  .btn-primary,
  .btn-ghost,
  .btn-line {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
    padding: var(--control-pad);
    border-radius: var(--rad-sm);
    font-size: var(--fs-3);
    font-weight: var(--fw-semibold);
    line-height: 1.2;
    cursor: pointer;
    text-align: center;
    transition:
      transform 0.15s var(--ease-out, ease),
      box-shadow 0.2s var(--ease-out, ease),
      background 0.2s var(--ease-out, ease),
      border-color 0.2s var(--ease-out, ease),
      color 0.2s var(--ease-out, ease);
  }
  .btn-primary {
    background: var(--brand);
    color: var(--on-brand);
    box-shadow: var(--shadow-brand);
  }
  .btn-primary:hover { background: var(--brand-600); transform: translateY(-1px); }
  .btn-ghost {
    background: var(--brand-ghost);
    color: var(--ink);
    border: 1px solid transparent;
  }
  .btn-ghost:hover { border-color: var(--line-strong); }
  .btn-line {
    background: transparent;
    color: var(--brand-ink);
    border: 1px solid var(--line-strong);
  }
  .btn-line:hover { background: var(--brand-ghost); }
  .btn-ok { background: var(--ok); color: #fff; }
  .btn-warn { background: var(--warn); color: #3a2c00; }
  .btn-danger { background: var(--danger); color: #fff; }

  .btn-sm { padding: 0.8rem 1.6rem; font-size: var(--fs-2); border-radius: var(--rad-xs); }
  .btn-lg { padding: 1.6rem 3.2rem; font-size: var(--fs-4); }
  .btn-icon { padding: 0; width: var(--control-h); height: var(--control-h); border-radius: var(--rad-circle); }
  .full { width: 100%; }

  .btn:disabled,
  .btn-primary:disabled,
  .btn-ghost:disabled,
  .is-disabled {
    opacity: 0.5;
    pointer-events: none;
  }

  /*
  ====================================================================
    FORM FIELDS
  ====================================================================
  */
  .field,
  input[type="text"].field,
  input[type="email"].field,
  input[type="password"].field,
  input[type="search"].field,
  input[type="number"].field,
  select.field,
  textarea.field {
    width: 100%;
    min-height: var(--control-h);
    padding: 1rem 1.6rem;
    background: var(--field-bg);
    border: 1px solid var(--field-border);
    border-radius: var(--rad-sm);
    font-size: var(--fs-3);
    color: var(--ink);
    outline: none;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
  }
  .field:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--brand-ghost);
  }
  .field::placeholder { color: var(--muted); }
  .field-label {
    display: block;
    font-size: var(--fs-2);
    font-weight: var(--fw-semibold);
    color: var(--ink);
    margin-bottom: 0.6rem;
  }
  .field-error { border-color: var(--danger); }
  .field-msg { font-size: var(--fs-2); color: var(--danger); margin-top: 0.4rem; }

  /*
  ====================================================================
    STATE CLASSES — shared with the JS components
  ====================================================================
  */
  .is-active,
  .active { --state: active; }
  .is-open { --state: open; }
  .selected { --state: selected; }

  .correct { background: var(--ok-bg); border-color: var(--ok); }
  .incorrect { background: var(--danger-bg); border-color: var(--danger); }

  /*
  ====================================================================
    SCROLLBAR — every project shipped its own copy of this
  ====================================================================
  */
  .custom-scrollbar {
    scrollbar-width: thin;
    scrollbar-color: var(--line-strong) transparent;
  }
  .custom-scrollbar::-webkit-scrollbar { width: 6px; height: 6px; }
  .custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
  .custom-scrollbar::-webkit-scrollbar-thumb {
    background: var(--line-strong);
    border-radius: var(--rad-pill);
  }
  .custom-scrollbar::-webkit-scrollbar-thumb:hover { background: var(--brand); }
  .scrollbar-none { scrollbar-width: none; }
  .scrollbar-none::-webkit-scrollbar { display: none; }
}