/* @nfccool/design v0.1.0 - generated bundle, do not edit.
   Layers: src/tokens.css, src/brands/nfccool.css */

/* ===== src/tokens.css ===== */
/* GENERATED by build/emit-css.mjs from src/tokens.json. Do not edit. */
/* Layer 1: primitives. Brand-neutral. No colour, no typeface.
   Derived from nfc-cool-website's own CSS. */

:root {
   /* Space - 4px grid, keeping 1.25rem as the signature grid gap */
   --space-1: 0.25rem;
   --space-2: 0.5rem;
   --space-3: 0.75rem;
   --space-4: 1rem;
   --space-5: 1.25rem;
   --space-6: 1.5rem;
   --space-7: 2rem;
   --space-8: 2.5rem;
   --space-9: 3rem;
   --space-10: 4rem;
   --space-11: 5rem;
   --space-12: 6rem;

   /* Section rhythm */
   --section-y-tight: clamp(3rem, 6vw, 5rem);
   --section-y: clamp(3.5rem, 7vw, 6rem);
   --section-y-loose: clamp(4rem, 8vw, 7rem);

   /* Type ramp */
   --text-hero: clamp(2.25rem, 6vw, 4rem);
   --text-display: clamp(2rem, 5vw, 3.25rem);
   --text-title: clamp(1.75rem, 3.5vw, 2.5rem);
   --text-heading: clamp(1.625rem, 3vw, 2.25rem);
   --text-subhead: clamp(1.375rem, 2.5vw, 1.75rem);
   --text-lg: 1.25rem;
   --text-md: 1.125rem;
   --text-base: 1.0625rem;
   --text-body: 1rem;
   --text-sm: 0.9375rem;
   --text-xs: 0.8125rem;
   --text-2xs: 0.75rem;
   --text-3xs: 0.6875rem;

   /* Leading */
   --leading-hero: 1.05;
   --leading-display: 1.1;
   --leading-heading: 1.15;
   --leading-snug: 1.3;
   --leading-normal: 1.55;
   --leading-body: 1.65;
   --leading-prose: 1.7;

   /* Tracking - negative on display, positive on uppercase micro-labels */
   --tracking-hero: -0.025em;
   --tracking-display: -0.02em;
   --tracking-heading: -0.015em;
   --tracking-normal: 0;
   --tracking-label: 0.04em;
   --tracking-eyebrow: 0.08em;

   /* Measures */
   --measure-max: 1200px;
   --measure-hero-media: 880px;
   --measure-faq: 820px;
   --measure-wide: 800px;
   --measure-prose: 760px;
   --measure-actions: 720px;
   --measure-content: 680px;
   --measure-gutter: max(1.5rem, env(safe-area-inset-left), env(safe-area-inset-right));
   --container-padding: var(--measure-gutter);
   --max-width: var(--measure-max);
   --content-width: var(--measure-content);
   --prose-width: var(--measure-prose);
   --faq-width: var(--measure-faq);
   --hero-media-width: var(--measure-hero-media);
   --actions-width: var(--measure-actions);

   /* Radius */
   --radius-sm: 4px;
   --radius-base: 8px;
   --radius-md: 10px;
   --radius-lg: 14px;
   --radius-xl: 32px;
   --radius-pill: 999px;
   --radius-control: var(--radius-pill);
   --radius: var(--radius-base);

   /* Elevation - resolves against brand-layer shadow colours */
   --elev-0: 0 1px 3px var(--color-shadow);
   --elev-1: 0 8px 24px var(--color-shadow-lg);
   --elev-2: 0 12px 32px var(--color-shadow-lg);
   --elev-3: 0 24px 60px -20px var(--color-shadow-lg);

   /* Navigation geometry */
   --nav-height: 4.5rem;
   --nav-width: 15rem;
   --nav-rail: 3.5rem;
   --nav-rail-stacked: 6rem;
   --nav-blur: 10px;

   /* Motion */
   --transition: 0.2s ease;
   --lift-1: -1px;
   --lift-2: -2px;
   --lift-3: -3px;

   /* Focus ring: two-tone. The inner halo clears dark surfaces, the outer
      stroke clears light ones, so one ring passes on every background
      including the brand gradient. Both tones come from the brand layer. */
   --focus-ring: 0 0 0 2px var(--focus-halo), 0 0 0 4px var(--focus-stroke);
}

@media (prefers-reduced-motion: reduce) {
   :root { --lift-1: 0; --lift-2: 0; --lift-3: 0; }
}

/* ===== src/brands/nfccool.css ===== */
/* GENERATED by build/emit-css.mjs from src/tokens.json. Do not edit. */
/* Layer 2: brand "NFC.cool". Colour and typeface only.
   A second brand is a new file here, never a fork of the layers above. */

:root, [data-brand="nfccool"] {
   --font-heading: "Titillium Web", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
   --font-sans: "Titillium Web", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
   --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
   --font-script: "Caveat", "Brush Script MT", cursive;

   --color-bg: #F5F6F8;
   --color-bg-alt: #EDEFF3;
   --color-bg-card: #FFFFFF;
   --color-text: #212529;
   --color-text-secondary: #495057;
   --color-text-muted: #666D74;
   --color-border: #E6E8EB;
   --color-border-light: #F0F1F3;
   --color-accent: #FFC700;
   --color-accent-hover: #E6B400;
   --color-accent-light: rgba(255, 199, 0, 0.12);
   --color-brand-tail: #FFC700;
   --brand-tail-shadow: 0 1px 0.5px rgba(0, 0, 0, 0.4);
   --color-brand-highlight: rgba(255, 255, 255, 0.18);
   --nav-bar-bg: rgba(255, 255, 255, 0.92);
   --nav-side-bg: #FFFFFF;
   --nav-scrim: rgba(33, 37, 41, 0.45);
   --on-brand-text-shadow: 0 1px 1px rgba(0, 0, 0, 0.55);
   --elev-media: 0 30px 60px -20px rgba(0, 30, 70, 0.35), 0 8px 24px -8px rgba(0, 0, 0, 0.25);
   --brand-blue-1: #1A60CE;
   --brand-blue-2: #128CF0;
   --brand-glow: transparent;
   --brand-glow-radial: transparent;
   --color-link: #128CF0;
   --color-link-hover: #1A60CE;
   --color-link-text: #1A60CE;
   --color-link-text-hover: #1754B5;
   --color-link-light: rgba(26, 96, 206, 0.12);
   --color-on-brand: #FFFFFF;
   --color-primary-bg: #128CF0;
   --color-primary-fg: #FFFFFF;
   --color-primary-bg-hover: #0F76CA;
   --btn-onbrand-bg: #FFFFFF;
   --btn-onbrand-fg: #1A60CE;
   --focus-halo: #FFFFFF;
   --focus-stroke: #212529;
   --color-shadow: rgba(33, 37, 41, 0.18);
   --color-shadow-lg: rgba(33, 37, 41, 0.16);
   --color-code-bg: #0D1117;
   --color-code-text: #E6EDF3;
   --color-success-fg: #0A6E4A;
   --color-success-bg: rgba(5, 150, 105, 0.12);
   --color-success-border: rgba(5, 150, 105, 0.45);
   --color-warning-fg: #8A5A0C;
   --color-warning-bg: rgba(212, 130, 12, 0.14);
   --color-warning-border: rgba(212, 130, 12, 0.45);
   --color-danger-fg: #B3202A;
   --color-danger-on: #FFFFFF;
   --color-danger-bg: rgba(207, 34, 46, 0.10);
   --color-danger-border: rgba(207, 34, 46, 0.45);
   --color-info-fg: #1A60CE;
   --color-info-bg: rgba(26, 96, 206, 0.10);
   --color-info-border: rgba(26, 96, 206, 0.40);
   --color-neutral-fg: #495057;
   --color-neutral-bg: rgba(33, 37, 41, 0.06);
   --color-neutral-border: #E6E8EB;
   --field-bg: #FFFFFF;
   --field-border: #767E86;
   --switch-knob: #FFFFFF;
   --platform-ios-fg: #1A60CE;
   --platform-ios-bg: rgba(26, 96, 206, 0.10);
   --platform-ios-border: rgba(26, 96, 206, 0.28);
   --platform-android-fg: #1C7A47;
   --platform-android-bg: rgba(61, 220, 132, 0.14);
   --platform-android-border: rgba(61, 220, 132, 0.30);
   --status-blue-fg: #0058C4;
   --status-blue-bg: rgba(0, 122, 255, 0.20);
   --status-orange-fg: #9C5000;
   --status-orange-bg: rgba(255, 149, 0, 0.20);
   --status-green-fg: #1C7433;
   --status-green-bg: rgba(52, 199, 89, 0.20);
   --status-purple-fg: #8A2DB8;
   --status-purple-bg: rgba(175, 82, 222, 0.20);
   --status-grey-fg: #5E5E63;
   --status-grey-bg: rgba(142, 142, 147, 0.20);

   --brand-gradient: linear-gradient(180deg, var(--brand-blue-1) 0%, var(--brand-blue-2) 100%);
   --brand-gradient-radial: radial-gradient(at 80% 20%, var(--brand-blue-2) 0%, var(--brand-blue-1) 60%);
}

[data-theme="dark"], [data-brand="nfccool"][data-theme="dark"] {
   --color-bg: #161B22;
   --color-bg-alt: #10151C;
   --color-bg-card: #1C2128;
   --color-text: #F0F2F5;
   --color-text-secondary: #C2C8D0;
   --color-text-muted: #8B949E;
   --color-border: #30363D;
   --color-border-light: #21262D;
   --color-accent: #FFC700;
   --color-accent-hover: #FFD93D;
   --color-accent-light: rgba(255, 199, 0, 0.18);
   --color-brand-tail: #FFC700;
   --brand-tail-shadow: 0 1px 0.5px rgba(0, 0, 0, 0.4);
   --color-brand-highlight: transparent;
   --nav-bar-bg: rgba(22, 27, 34, 0.85);
   --nav-side-bg: #1C2128;
   --nav-scrim: rgba(0, 0, 0, 0.6);
   --on-brand-text-shadow: none;
   --elev-media: 0 30px 60px -20px rgba(255, 199, 0, 0.28), 0 8px 24px -8px rgba(255, 199, 0, 0.16);
   --brand-blue-1: #161B22;
   --brand-blue-2: #161B22;
   --brand-glow: rgba(255, 199, 0, 0.10);
   --brand-glow-radial: rgba(255, 199, 0, 0.08);
   --color-link: #FFC700;
   --color-link-hover: #FFD93D;
   --color-link-text: #FFC700;
   --color-link-text-hover: #FFD93D;
   --color-link-light: rgba(255, 199, 0, 0.18);
   --color-on-brand: #F0F2F5;
   --color-primary-bg: #FFC700;
   --color-primary-fg: #161B22;
   --color-primary-bg-hover: #FFD93D;
   --btn-onbrand-bg: #FFC700;
   --btn-onbrand-fg: #161B22;
   --focus-halo: #0D1117;
   --focus-stroke: #F0F2F5;
   --color-shadow: rgba(0, 0, 0, 0.30);
   --color-shadow-lg: rgba(0, 0, 0, 0.50);
   --color-code-bg: #0D1117;
   --color-code-text: #E6EDF3;
   --color-success-fg: #3FB950;
   --color-success-bg: rgba(63, 185, 80, 0.15);
   --color-success-border: rgba(63, 185, 80, 0.45);
   --color-warning-fg: #FFB454;
   --color-warning-bg: rgba(255, 180, 84, 0.15);
   --color-warning-border: rgba(255, 180, 84, 0.45);
   --color-danger-fg: #FF7B72;
   --color-danger-on: #161B22;
   --color-danger-bg: rgba(255, 123, 114, 0.15);
   --color-danger-border: rgba(255, 123, 114, 0.45);
   --color-info-fg: #79C0FF;
   --color-info-bg: rgba(121, 192, 255, 0.15);
   --color-info-border: rgba(121, 192, 255, 0.40);
   --color-neutral-fg: #C2C8D0;
   --color-neutral-bg: rgba(240, 242, 245, 0.08);
   --color-neutral-border: #30363D;
   --field-bg: #0D1117;
   --field-border: #8B949E;
   --switch-knob: #FFFFFF;
   --platform-ios-fg: #00A2F3;
   --platform-ios-bg: rgba(0, 162, 243, 0.12);
   --platform-ios-border: rgba(0, 162, 243, 0.34);
   --platform-android-fg: #5BE39A;
   --platform-android-bg: rgba(61, 220, 132, 0.16);
   --platform-android-border: rgba(61, 220, 132, 0.32);
   --status-blue-fg: #6CB2FF;
   --status-blue-bg: rgba(0, 122, 255, 0.20);
   --status-orange-fg: #FF9500;
   --status-orange-bg: rgba(255, 149, 0, 0.20);
   --status-green-fg: #34C759;
   --status-green-bg: rgba(52, 199, 89, 0.20);
   --status-purple-fg: #CF95F0;
   --status-purple-bg: rgba(175, 82, 222, 0.20);
   --status-grey-fg: #AEAEB2;
   --status-grey-bg: rgba(142, 142, 147, 0.20);

   /* The gradient collapses to the page background plus a faint glow in
      the brand's own --brand-glow, so brand bands blend into the page
      instead of forming a dark slab. This is nfc.cool's existing dark-mode
      behaviour, parameterised so a second brand glows in its own accent. */
   --brand-gradient:
      radial-gradient(ellipse 85% 55% at 50% 50%, var(--brand-glow) 0%, transparent 70%),
      linear-gradient(180deg, var(--color-bg) 0%, var(--color-bg) 100%);
   --brand-gradient-radial: radial-gradient(at 50% 50%, var(--brand-glow-radial) 0%, var(--color-bg) 60%);
}