/* Токены дизайн-системы (цвета, типографика, отступы, тени).
   Используются переменными var(--*) в разметке страницы Chiko-Choko. */

/* ===== tokens/fonts.css ===== */
/* Display face is a SUBSTITUTION. The source repo ships no font binaries; the
   wordmark in assets/brand/logo.png is set in a tall condensed grotesque, and
   Oswald is the closest Google Fonts match. Replace if real files arrive. */
:root{
  --font-display:"Montserrat","Montserrat Fallback",sans-serif;
  --font-sans:"Inter","Inter Fallback",-apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif;
  --font-mono:"Roboto","Roboto Fallback",sans-serif;
}

/* ===== tokens/colors.css ===== */
:root{
  /* --- Brand base: sampled from assets/brand/logo.png --- */
  --slate-900:#2b383d;
  --slate-800:#33434a;
  --slate-700:#3f5057; /* wordmark frame + primary text */
  --slate-600:#4e6169;
  --slate-500:#5c7078;
  --slate-400:#7b8a91;
  --slate-300:#9aa8ae;
  --slate-200:#c6d2d6;
  --slate-100:#e4e8ea;
  --slate-50:#f5f7f8;
  --white:#ffffff;

  --orange-700:#0f5c33;
  --orange-600:#12683c;
  --orange-500:#157a43; /* site accent — green (was orange) */
  --orange-200:#b8ddc7;
  --orange-100:#e3f2ea;

  --blue-700:#1878a2;
  --blue-600:#1a8cbb;
  --blue-500:#25aae2; /* "checklist" wordmark */
  --blue-200:#a9dcf4;
  --blue-100:#ddf1fb;

  /* --- Semantic status (intentional addition: the checklist demands
         explicit error / valid / warning states for forms) --- */
  --green-600:#25834a;
  --green-500:#2f9e57;
  --green-100:#e2f4e9;
  --amber-600:#c8811f;
  --amber-500:#e8a33d;
  --amber-100:#fdf1de;
  --red-600:#b83a3a;
  --red-500:#d64545;
  --red-100:#fbe6e6;

  /* --- Semantic aliases --- */
  --text-heading:var(--slate-900);
  --text-body:var(--slate-700);
  --text-muted:var(--slate-500);
  --text-faint:var(--slate-400);
  --text-inverse:var(--white);
  --text-link:var(--blue-600);
  --text-link-hover:var(--blue-700);
  --text-link-visited:var(--slate-600);
  --text-accent:var(--orange-500);

  --surface-page:var(--white);
  --surface-subtle:var(--slate-50);
  --surface-card:var(--white);
  --surface-code:var(--slate-50);
  --surface-inverse:var(--slate-800);
  --surface-hover:var(--slate-50);

  --border-default:var(--slate-100);
  --border-strong:var(--slate-200);
  --border-focus:var(--blue-500);

  --action-primary:var(--orange-500);
  --action-primary-hover:var(--orange-600);
  --action-primary-active:var(--orange-700);
  --action-secondary:var(--slate-700);
  --action-secondary-hover:var(--slate-800);
  --action-disabled-bg:var(--slate-100);
  --action-disabled-text:var(--slate-400);

  --status-info:var(--blue-500);
  --status-info-bg:var(--blue-100);
  --status-tip:var(--green-500);
  --status-tip-bg:var(--green-100);
  --status-warning:var(--amber-500);
  --status-warning-bg:var(--amber-100);
  --status-danger:var(--red-500);
  --status-danger-bg:var(--red-100);
  --status-done:var(--green-500);
}

/* ===== tokens/typography.css ===== */
:root{
  --text-2xs:11px;
  --text-xs:12px;
  --text-sm:13px;
  --text-base:15px;
  --text-md:16px;
  --text-lg:18px;
  --text-xl:22px;
  --text-2xl:28px;
  --text-3xl:36px;
  --text-4xl:48px;
  --text-5xl:64px;

  --leading-tight:1.1;
  --leading-snug:1.3;
  --leading-normal:1.5;
  --leading-relaxed:1.65;

  --weight-regular:400;
  --weight-medium:500;
  --weight-semibold:600;
  --weight-bold:700;

  --tracking-display:0.02em;
  --tracking-caps:0.08em;
  --tracking-normal:0;

  /* Composed roles */
  --type-display:var(--weight-700,700) var(--text-4xl)/var(--leading-tight) var(--font-display);
  --type-h1:var(--weight-bold) var(--text-2xl)/var(--leading-snug) var(--font-sans);
  --type-h2:var(--weight-semibold) var(--text-xl)/var(--leading-snug) var(--font-sans);
  --type-h3:var(--weight-semibold) var(--text-md)/var(--leading-snug) var(--font-sans);
  --type-body:var(--weight-regular) var(--text-base)/var(--leading-relaxed) var(--font-sans);
  --type-small:var(--weight-regular) var(--text-sm)/var(--leading-normal) var(--font-sans);
  --type-code:var(--weight-regular) var(--text-sm)/var(--leading-normal) var(--font-mono);
  --type-eyebrow:var(--weight-semibold) var(--text-xs)/var(--leading-normal) var(--font-sans);
}

/* ===== tokens/spacing.css ===== */
:root{
  --space-0:0;
  --space-1:2px;
  --space-2:4px;
  --space-3:8px;
  --space-4:12px;
  --space-5:16px;
  --space-6:20px;
  --space-7:24px;
  --space-8:32px;
  --space-9:40px;
  --space-10:48px;
  --space-12:64px;
  --space-16:96px;

  /* Grid: the checklist insists the grid be explicit — 12 columns, 24px gutter */
  --grid-columns:12; /* @kind other */
  --grid-gutter:24px;
  --grid-margin:24px;
  --measure-prose:760px;   /* readable line length for checklist copy */
  --measure-wide:1100px;
  --sidebar-width:280px;

  /* Breakpoints (documentation values; usable via media queries) */
  --bp-sm:576px;
  --bp-md:768px;
  --bp-lg:992px;
  --bp-xl:1200px;
}

/* ===== tokens/borders.css ===== */
:root{
  --radius-none:0;
  --radius-xs:2px;
  --radius-sm:3px;
  --radius-md:6px;
  --radius-lg:10px;
  --radius-pill:999px;

  --border-width-hair:1px;
  --border-width-thick:2px;
  --border-width-frame:6px; /* the wordmark's square frame */

  --focus-ring:0 0 0 3px rgba(37,170,226,.35);
  --focus-ring-danger:0 0 0 3px rgba(214,69,69,.3);
}

/* ===== tokens/elevation.css ===== */
:root{
  --shadow-none:none;
  --shadow-1:0 1px 2px rgba(43,56,61,.06);
  --shadow-2:0 2px 6px rgba(43,56,61,.08);
  --shadow-3:0 8px 24px rgba(43,56,61,.12);
  --shadow-inset:inset 0 1px 2px rgba(43,56,61,.08);
}

/* ===== tokens/motion.css ===== */
:root{
  --ease-standard:cubic-bezier(.4,0,.2,1); /* @kind other */
  --ease-out:cubic-bezier(0,0,.2,1); /* @kind other */
  --duration-fast:120ms; /* @kind other */
  --duration-base:180ms; /* @kind other */
  --duration-slow:280ms; /* @kind other */
  --transition-ui:background-color var(--duration-fast) var(--ease-standard),border-color var(--duration-fast) var(--ease-standard),color var(--duration-fast) var(--ease-standard),box-shadow var(--duration-fast) var(--ease-standard);
}

/* ===== tokens/components.css ===== */
/* LAYER 3 - COMPONENT TOKENS. See guidelines/token-layers.html and readme.md.
   Adopted from nextlevelbuilder/ui-ux-pro-max-skill (design-system references:
   token-architecture.md + component-tokens.md). Naming is
   component-property-variant-state. A component reads THIS layer only; every value
   here points at a layer-2 semantic alias and never at a raw hex, so dark mode and
   the aesthetic presets re-theme components without editing one of them. */
:root{
  /* Button */
  --button-bg:var(--action-primary);
  --button-fg:var(--text-inverse);
  --button-hover-bg:var(--action-primary-hover);
  --button-active-bg:var(--action-primary-active);
  --button-secondary-bg:var(--action-secondary);
  --button-secondary-fg:var(--text-inverse);
  --button-secondary-hover-bg:var(--action-secondary-hover);
  --button-outline-border:var(--border-strong);
  --button-outline-fg:var(--slate-700);
  --button-outline-hover-bg:var(--surface-hover);
  --button-ghost-fg:var(--text-link);
  --button-danger-bg:var(--status-danger);
  --button-danger-fg:var(--text-inverse);
  --button-disabled-bg:var(--action-disabled-bg);
  --button-disabled-fg:var(--action-disabled-text);
  --button-radius:var(--radius-sm);
  --button-font-weight:var(--weight-semibold);
  --button-padding-y:9px;      --button-padding-x:18px;      --button-font-size:var(--text-base);
  --button-padding-y-sm:6px;   --button-padding-x-sm:12px;   --button-font-size-sm:var(--text-sm);
  --button-padding-y-lg:13px;  --button-padding-x-lg:26px;   --button-font-size-lg:var(--text-md);

  /* Input */
  --input-bg:var(--surface-card);
  --input-fg:var(--text-body);
  --input-border:var(--border-strong);
  --input-placeholder:var(--text-faint);
  --input-focus-ring:var(--focus-ring);
  --input-error-border:var(--status-danger);
  --input-error-fg:var(--red-600);
  --input-valid-border:var(--status-tip);
  --input-disabled-bg:var(--surface-subtle);
  --input-disabled-fg:var(--action-disabled-text);
  --input-radius:var(--radius-sm);
  --input-shadow:var(--shadow-inset);
  --input-padding-y:9px;    --input-padding-x:11px;
  --input-padding-y-sm:6px; --input-padding-x-sm:9px;
  --input-padding-y-lg:12px;--input-padding-x-lg:14px;
  --control-size:17px;              /* checkbox / radio box */
  --control-checked-bg:var(--status-done);
  --control-radio-bg:var(--blue-500);

  /* Card */
  --card-bg:var(--surface-card);
  --card-border:var(--border-default);
  --card-shadow:var(--shadow-1);
  --card-shadow-hover:var(--shadow-2);
  --card-radius:var(--radius-sm);
  --card-padding:var(--space-7);
  --card-padding-sm:var(--space-5);
  --card-gap:var(--space-5);

  /* Badge / Tag */
  --badge-radius:var(--radius-xs);
  --badge-padding-y:3px; --badge-padding-x:7px;
  --badge-font-size:var(--text-xs);
  --tag-radius:var(--radius-pill);
  --tag-bg:var(--surface-subtle);
  --tag-border:var(--border-default);

  /* Callout / Alert */
  --callout-rule-width:3px;
  --callout-padding:var(--space-4) var(--space-5);
  --alert-radius:var(--radius-sm);
  --alert-padding:var(--space-4) var(--space-5);

  /* Dialog */
  --dialog-overlay-bg:rgba(43,56,61,.45);
  --dialog-bg:var(--surface-card);
  --dialog-fg:var(--text-body);
  --dialog-border:var(--border-default);
  --dialog-shadow:var(--shadow-3);
  --dialog-radius:var(--radius-md);
  --dialog-padding:var(--space-7);
  --dialog-max-width-sm:384px;
  --dialog-max-width:512px;
  --dialog-max-width-lg:640px;
  --dialog-max-width-xl:768px;

  /* Table */
  --table-header-bg:var(--surface-subtle);
  --table-header-fg:var(--text-muted);
  --table-row-bg:var(--surface-card);
  --table-row-hover-bg:var(--surface-hover);
  --table-row-selected-bg:var(--blue-100);
  --table-border:var(--border-default);
  --table-cell-padding-y:12px;
  --table-cell-padding-x:16px;
  --table-row-height-compact:40px;
  --table-row-height:48px;
  --table-row-height-comfortable:56px;

  /* Interaction contract (shared) */
  --ring-width:3px;
  --opacity-loading:.85; /* @kind other */
  --touch-target-min:44px;
}

/* ===== tokens/base.css ===== */
*,*::before,*::after{box-sizing:border-box}
body{margin:0;font:var(--type-body);color:var(--text-body);background:var(--surface-page);-webkit-font-smoothing:antialiased;text-wrap:pretty}
h1,h2,h3,h4{color:var(--text-heading);margin:0}
h1{font:var(--type-h1)}h2{font:var(--type-h2)}h3{font:var(--type-h3)}
a{color:var(--text-link);text-decoration:none}
a:hover{color:var(--text-link-hover);text-decoration:underline}
a:focus-visible{outline:none;box-shadow:var(--focus-ring);border-radius:var(--radius-xs)}
a:visited{color:var(--text-link-visited)}
code,pre{font:var(--type-code)}
code{background:var(--surface-code);padding:2px 5px;border-radius:var(--radius-sm)}
pre{background:var(--surface-code);border:1px solid var(--border-default);border-radius:var(--radius-sm);padding:var(--space-5);overflow:auto}