/*
 * Ktanim design tokens.
 *
 * Generated by scripts/build-tokens.sh -- do not edit by hand. Every rule below
 * is copied verbatim from the Claude Design handoff bundle at
 * design/kids-clothing-e-commerce-theme/project/_ds/<system>/tokens/, in the
 * order that design system's own styles.css imports them.
 *
 * The single deviation is tokens/fonts.css: its Google Fonts @import is
 * replaced by the self-hosted @font-face rules below (CLAUDE.md rule 7).
 */

/* --- assets/fonts/fonts.css (generated by scripts/fetch-fonts.py) --- */
/*
 * Self-hosted webfonts -- generated by scripts/fetch-fonts.py, do not edit.
 *
 * Replaces the Google Fonts @import in the design system's tokens/fonts.css
 * (CLAUDE.md rule 7: no external requests from the theme). Hebrew + Latin
 * subsets only; unicode-range copied from Google's stylesheet.
 *
 * `Gveret Levin AlefAlefAlef` is the design-system token's name for the face;
 * the files are Google's `Gveret Levin`, which is the family that actually
 * exists. Declaring it under the token name keeps tokens/typography.css verbatim.
 */

@font-face {
	font-family: 'Varela Round';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/varela-round-hebrew.woff2') format('woff2');
	unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}

@font-face {
	font-family: 'Varela Round';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/varela-round-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: 'Rubik';
	font-style: normal;
	font-weight: 300 900;
	font-display: swap;
	src: url('../fonts/rubik-hebrew.woff2') format('woff2');
	unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}

@font-face {
	font-family: 'Rubik';
	font-style: normal;
	font-weight: 300 900;
	font-display: swap;
	src: url('../fonts/rubik-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: 'Suez One';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/suez-one-hebrew.woff2') format('woff2');
	unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}

@font-face {
	font-family: 'Suez One';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/suez-one-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: 'Gveret Levin AlefAlefAlef';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/gveret-levin-hebrew.woff2') format('woff2');
	unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}

@font-face {
	font-family: 'Gveret Levin AlefAlefAlef';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/gveret-levin-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;
}

/* --- tokens/colors.css --- */
:root{
/* --- Base palette, sampled from the logo --- */
--blue-900:#152A6B;--blue-800:#1B3486;--blue-700:#23409B;--blue-600:#3355C4;--blue-500:#5B7BE8;
--blue-400:#8BA5F2;--blue-300:#B6C6F8;--blue-200:#DAE2FC;--blue-100:#EDF1FE;
--cyan-700:#2A93B5;--cyan-600:#45AFCF;--cyan-500:#6FC8E0;--cyan-400:#8CD1E6;--cyan-300:#AEE0EE;
--cyan-200:#D3EEF6;--cyan-100:#EAF7FB;
--white:#FFFFFF;--ink-900:#0F1A33;--ink-700:#2B3856;--ink-500:#5A6784;--ink-400:#8A95AC;
--ink-300:#B9C1D2;--ink-200:#DCE1EA;--ink-100:#EEF1F6;--ink-050:#F7F9FC;
/* Playful accents — used sparingly, never as the dominant field */
--sun-500:#FFC24D;--sun-300:#FFE0A3;--coral-500:#FF7A6B;--coral-300:#FFC0B8;
--mint-500:#63D2A8;--mint-300:#BEEEDC;--grape-500:#A97BE0;--grape-300:#DFCCF5;
/* --- Semantic aliases --- */
--brand:var(--blue-700);--brand-strong:var(--blue-900);--brand-soft:var(--blue-200);
--accent:var(--cyan-400);--accent-strong:var(--cyan-700);--accent-soft:var(--cyan-200);
--text-heading:var(--blue-900);--text-body:var(--ink-700);--text-muted:var(--ink-500);
--text-inverse:var(--white);--text-link:var(--blue-600);--text-link-hover:var(--blue-800);
--surface-page:var(--white);--surface-sunken:var(--cyan-100);--surface-card:var(--white);
--surface-raised:var(--white);--surface-brand:var(--blue-700);--surface-accent:var(--cyan-200);
--border-subtle:var(--ink-200);--border-default:var(--ink-300);--border-strong:var(--blue-700);
--focus-ring:var(--cyan-600);
--success:#2FA36B;--success-soft:#DFF3E9;--warning:#E09A19;--warning-soft:#FDF0D6;
--danger:#D94B3D;--danger-soft:#FBE3E0;--info:var(--cyan-700);--info-soft:var(--cyan-100);
--sale:var(--coral-500);--sale-soft:var(--coral-300);
}

/* --- tokens/typography.css --- */
:root{
--font-display:"Suez One","Varela Round",system-ui,sans-serif;
--font-core:"Varela Round","Rubik",system-ui,sans-serif;
--font-body:"Rubik",system-ui,-apple-system,"Segoe UI",sans-serif;
--font-hand:"Gveret Levin AlefAlefAlef","Varela Round",cursive;
--font-mono:ui-monospace,SFMono-Regular,Menlo,monospace;
--fs-display-1:56px;--fs-display-2:44px;--fs-h1:34px;--fs-h2:27px;--fs-h3:21px;
--fs-lg:18px;--fs-body:16px;--fs-sm:14px;--fs-xs:12.5px;--fs-micro:11px;
--lh-tight:1.15; /* @kind font */
--lh-snug:1.3; /* @kind font */
--lh-body:1.6; /* @kind font */
--lh-loose:1.75; /* @kind font */
--fw-regular:400; /* @kind font */
--fw-medium:500; /* @kind font */
--fw-bold:700; /* @kind font */
--fw-black:900; /* @kind font */
--ls-tight:-0.01em; /* @kind font */
--ls-normal:0; /* @kind font */
--ls-wide:0.04em; /* @kind font */
--ls-caps:0.08em; /* @kind font */
}

/* --- tokens/spacing.css --- */
:root{
--space-0:0px;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;
--space-6:24px;--space-8:32px;--space-10:40px;--space-12:48px;--space-16:64px;--space-20:80px;
--space-24:96px;--space-32:128px;
--gutter:24px;--page-max:1240px;--section-y:72px;--field-h:46px;--control-h:44px;
}

/* --- tokens/radius.css --- */
:root{
--radius-xs:6px;--radius-sm:10px;--radius-md:14px;--radius-lg:20px;--radius-xl:28px;
--radius-pill:999px;--radius-blob:62% 38% 55% 45% / 45% 55% 45% 55%;
--border-w:1.5px;--border-w-thick:2.5px;
}

/* --- tokens/elevation.css --- */
:root{
--shadow-xs:0 1px 2px rgba(21,42,107,.06);
--shadow-sm:0 2px 6px rgba(21,42,107,.08);
--shadow-md:0 6px 18px rgba(21,42,107,.10);
--shadow-lg:0 14px 36px rgba(21,42,107,.14);
--shadow-brand:0 8px 20px rgba(35,64,155,.24);
--shadow-inset:inset 0 2px 0 rgba(255,255,255,.7);
--ring-focus:0 0 0 3px rgba(69,175,207,.45);
--press-shift:2px;
}

/* --- tokens/motion.css --- */
:root{
--ease-out:cubic-bezier(.22,.85,.3,1); /* @kind other */
--ease-in-out:cubic-bezier(.5,0,.25,1); /* @kind other */
--ease-bounce:cubic-bezier(.34,1.56,.64,1); /* @kind other */
--dur-fast:120ms; /* @kind other */
--dur-base:200ms; /* @kind other */
--dur-slow:340ms; /* @kind other */
--t-hover:all var(--dur-fast) var(--ease-out); /* @kind other */
--t-pop:transform var(--dur-base) var(--ease-bounce); /* @kind other */
}

/* --- tokens/base.css --- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;direction:rtl;font-family:var(--font-body);font-size:var(--fs-body);line-height:var(--lh-body);color:var(--text-body);background:var(--surface-page);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--font-core);color:var(--text-heading);line-height:var(--lh-snug);margin:0 0 var(--space-3);font-weight:var(--fw-regular)}
h1{font-size:var(--fs-h1)}h2{font-size:var(--fs-h2)}h3{font-size:var(--fs-h3)}
p{margin:0 0 var(--space-4)}
a{color:var(--text-link);text-decoration-color:var(--cyan-300);text-underline-offset:3px;transition:var(--t-hover)}
a:hover{color:var(--text-link-hover);text-decoration-color:currentColor}
button{font-family:inherit}
:focus-visible{outline:none;box-shadow:var(--ring-focus);border-radius:var(--radius-sm)}
::selection{background:var(--cyan-200);color:var(--blue-900)}