@c-code/c-code-fw 1.3.0 → 2.1.0

package/ui/lib/components/promo-modal/promo-modal.component.d.ts

@@ -1,24 +1,56 @@
+import { ButtonVariant } from '../button/button.component';
 import * as i0 from "@angular/core";
 /**
- * Modal over the page, for example a promotion shown when the site opens.
- * Shows `imageSrc`, or the projected content when there is no image.
- * Closes with the ✕ button, a backdrop click or the Escape key.
+ * Modal over the page, for example a promotion. Shows `imageSrc`, or the projected
+ * content when there is no image, plus an optional call to action.
+ *
+ * It decides by itself when to open:
+ * - `autoOpen` opens it in the browser after `delayMs` (never during SSR, so it is not
+ *   part of the prerendered page).
+ * - `rememberKey` stores the dismissal in localStorage for `rememberDays` days, so it
+ *   does not reopen on every visit.
+ *
+ * Closes with the ✕ button, a backdrop click or Escape. Focus moves into the modal,
+ * stays inside while open and returns to the previous element on close.
  *
  * ```html
- * <cc-promo-modal [(open)]="showPromo" imageSrc="assets/images/pop.jpeg" imageAlt="Promoción" />
+ * <cc-promo-modal imageSrc="assets/images/pop.jpeg" imageAlt="Promoción" [delayMs]="6000"
+ *                 rememberKey="promo-octubre" ctaLabel="Reservar la promo" [ctaHref]="whatsapp" />
  * ```
+ *
+ * Tokens: --cc-modal-backdrop, --cc-modal-radius, --cc-modal-close-bg, --cc-modal-close-color.
  */
 export declare class PromoModalComponent {
-    /** Whether the modal is visible. Use `[(open)]` to bind both ways. */
+    /** Whether the modal is visible. Use `[(open)]` to control it from outside. */
     readonly open: import("@angular/core").ModelSignal<boolean>;
+    /** Opens the modal by itself in the browser after `delayMs`. */
+    readonly autoOpen: import("@angular/core").InputSignal<boolean>;
+    readonly delayMs: import("@angular/core").InputSignal<number>;
+    /** localStorage key to remember the dismissal. Change it for each new promotion. */
+    readonly rememberKey: import("@angular/core").InputSignal<string>;
+    readonly rememberDays: import("@angular/core").InputSignal<number>;
     readonly imageSrc: import("@angular/core").InputSignal<string>;
     readonly imageAlt: import("@angular/core").InputSignal<string>;
-    /** Makes the image a link, for example to WhatsApp. */
+    /** Makes the image a link. */
     readonly link: import("@angular/core").InputSignal<string>;
+    /** Button under the image. Hidden when `ctaHref` is empty. */
+    readonly ctaLabel: import("@angular/core").InputSignal<string>;
+    readonly ctaHref: import("@angular/core").InputSignal<string>;
+    readonly ctaVariant: import("@angular/core").InputSignal<ButtonVariant>;
     readonly closeOnBackdrop: import("@angular/core").InputSignal<boolean>;
     readonly closeLabel: import("@angular/core").InputSignal<string>;
     readonly closed: import("@angular/core").OutputEmitterRef<void>;
+    private readonly document;
+    private readonly box;
+    private readonly closeButton;
+    private readonly isOpen;
+    constructor();
     close(): void;
+    /** Keeps Tab and Shift+Tab inside the modal. */
+    protected trapFocus(event: KeyboardEvent): void;
+    private storage;
+    private wasDismissed;
+    private remember;
     static ɵfac: i0.ɵɵFactoryDeclaration<PromoModalComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<PromoModalComponent, "cc-promo-modal", never, { "open": { "alias": "open"; "required": false; "isSignal": true; }; "imageSrc": { "alias": "imageSrc"; "required": false; "isSignal": true; }; "imageAlt": { "alias": "imageAlt"; "required": false; "isSignal": true; }; "link": { "alias": "link"; "required": false; "isSignal": true; }; "closeOnBackdrop": { "alias": "closeOnBackdrop"; "required": false; "isSignal": true; }; "closeLabel": { "alias": "closeLabel"; "required": false; "isSignal": true; }; }, { "open": "openChange"; "closed": "closed"; }, never, ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<PromoModalComponent, "cc-promo-modal", never, { "open": { "alias": "open"; "required": false; "isSignal": true; }; "autoOpen": { "alias": "autoOpen"; "required": false; "isSignal": true; }; "delayMs": { "alias": "delayMs"; "required": false; "isSignal": true; }; "rememberKey": { "alias": "rememberKey"; "required": false; "isSignal": true; }; "rememberDays": { "alias": "rememberDays"; "required": false; "isSignal": true; }; "imageSrc": { "alias": "imageSrc"; "required": false; "isSignal": true; }; "imageAlt": { "alias": "imageAlt"; "required": false; "isSignal": true; }; "link": { "alias": "link"; "required": false; "isSignal": true; }; "ctaLabel": { "alias": "ctaLabel"; "required": false; "isSignal": true; }; "ctaHref": { "alias": "ctaHref"; "required": false; "isSignal": true; }; "ctaVariant": { "alias": "ctaVariant"; "required": false; "isSignal": true; }; "closeOnBackdrop": { "alias": "closeOnBackdrop"; "required": false; "isSignal": true; }; "closeLabel": { "alias": "closeLabel"; "required": false; "isSignal": true; }; }, { "open": "openChange"; "closed": "closed"; }, never, ["*"], true, never>;
 }

package/ui/lib/components/search-box/search-box.component.d.ts

@@ -5,14 +5,19 @@ import * as i0 from "@angular/core";
  * ```html
  * <cc-search-box placeholder="Buscar plan" [(value)]="query" (search)="onSearch($event)" />
  * ```
+ *
+ * Tokens: --cc-search-bg, --cc-search-border, --cc-search-btn-bg, --cc-search-btn-color,
+ * --cc-search-radius.
  */
 export declare class SearchBoxComponent {
     readonly value: import("@angular/core").ModelSignal<string>;
     readonly placeholder: import("@angular/core").InputSignal<string>;
+    /** Accessible name of the field. Defaults to `placeholder`. */
+    readonly label: import("@angular/core").InputSignal<string>;
     readonly buttonLabel: import("@angular/core").InputSignal<string>;
     readonly iconSrc: import("@angular/core").InputSignal<string>;
     readonly search: import("@angular/core").OutputEmitterRef<string>;
     onInput(event: Event): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<SearchBoxComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<SearchBoxComponent, "cc-search-box", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "buttonLabel": { "alias": "buttonLabel"; "required": false; "isSignal": true; }; "iconSrc": { "alias": "iconSrc"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "search": "search"; }, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SearchBoxComponent, "cc-search-box", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "buttonLabel": { "alias": "buttonLabel"; "required": false; "isSignal": true; }; "iconSrc": { "alias": "iconSrc"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "search": "search"; }, never, never, true, never>;
 }

package/ui/lib/components/section-heading/section-heading.component.d.ts

@@ -0,0 +1,34 @@
+import * as i0 from "@angular/core";
+/**
+ * Section title with optional eyebrow, icon, subtitle and decorative rule.
+ * Use one per page section so every page shares the same heading rhythm.
+ *
+ * ```html
+ * <cc-section-heading title="Planes" subtitle="Para ti, en pareja o en grupo" iconSrc="assets/images/trebol.png" />
+ * <cc-section-heading title="Contacto" tone="inverse" align="center" level="h3" />
+ * ```
+ *
+ * Tokens: --cc-section-heading-color, --cc-section-heading-size, --cc-section-heading-rule,
+ * --cc-section-heading-gap, --cc-section-heading-icon-size.
+ */
+export declare class SectionHeadingComponent {
+    readonly title: import("@angular/core").InputSignal<string>;
+    readonly subtitle: import("@angular/core").InputSignal<string>;
+    /** Small text above the title. */
+    readonly eyebrow: import("@angular/core").InputSignal<string>;
+    readonly iconSrc: import("@angular/core").InputSignal<string>;
+    /** Heading level. The visual size does not change with the level. */
+    readonly level: import("@angular/core").InputSignal<"h1" | "h2" | "h3">;
+    readonly align: import("@angular/core").InputSignal<"center" | "start">;
+    /** `default` for light backgrounds, `inverse` for dark ones, `accent` for brand-colored titles. */
+    readonly tone: import("@angular/core").InputSignal<"inverse" | "default" | "accent">;
+    /** Shows a short accent line under the title. */
+    readonly rule: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+    /** `sm` for sub-sections, `md` (default) for page sections, `lg` for heroes. */
+    readonly size: import("@angular/core").InputSignal<"sm" | "md" | "lg">;
+    readonly italic: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+    /** Id of the heading element, for anchors. */
+    readonly headingId: import("@angular/core").InputSignal<string | null>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SectionHeadingComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SectionHeadingComponent, "cc-section-heading", never, { "title": { "alias": "title"; "required": true; "isSignal": true; }; "subtitle": { "alias": "subtitle"; "required": false; "isSignal": true; }; "eyebrow": { "alias": "eyebrow"; "required": false; "isSignal": true; }; "iconSrc": { "alias": "iconSrc"; "required": false; "isSignal": true; }; "level": { "alias": "level"; "required": false; "isSignal": true; }; "align": { "alias": "align"; "required": false; "isSignal": true; }; "tone": { "alias": "tone"; "required": false; "isSignal": true; }; "rule": { "alias": "rule"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "italic": { "alias": "italic"; "required": false; "isSignal": true; }; "headingId": { "alias": "headingId"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}

package/ui/lib/components/social-links/social-links.component.d.ts

@@ -1,17 +1,21 @@
 import { SocialLink } from '../../models/ui.models';
 import * as i0 from "@angular/core";
 /**
- * Row of social network icons that open in a new tab.
+ * Row of social network icons that open in a new tab. Each link has a 44px tap area
+ * even when the icon is smaller.
  *
  * ```html
- * <cc-social-links [links]="socials" size="1.25rem" />
+ * <cc-social-links [links]="socials" size="sm" tone="inverse" />
  * ```
+ *
+ * Tokens: --cc-social-icon-size, --cc-social-gap.
  */
 export declare class SocialLinksComponent {
     readonly links: import("@angular/core").InputSignal<SocialLink[]>;
-    /** Icon width, any CSS length. */
-    readonly size: import("@angular/core").InputSignal<string>;
-    readonly gap: import("@angular/core").InputSignal<string>;
+    /** Icon size: `sm` 1rem, `md` 1.5rem, `lg` 2.5rem. */
+    readonly size: import("@angular/core").InputSignal<"sm" | "md" | "lg">;
+    /** `inverse` for dark backgrounds: changes the hover and focus colors. */
+    readonly tone: import("@angular/core").InputSignal<"inverse" | "default">;
     static ɵfac: i0.ɵɵFactoryDeclaration<SocialLinksComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<SocialLinksComponent, "cc-social-links", never, { "links": { "alias": "links"; "required": true; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "gap": { "alias": "gap"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SocialLinksComponent, "cc-social-links", never, { "links": { "alias": "links"; "required": true; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "tone": { "alias": "tone"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }

package/ui/lib/components/whatsapp-button/whatsapp-button.component.d.ts

@@ -2,18 +2,28 @@ import * as i0 from "@angular/core";
 /**
  * Floating WhatsApp button, fixed to a corner of the screen.
  *
+ * `variant`:
+ * - `icon` (default): round button with the logo.
+ * - `extended`: pill with the logo and `label` as visible text.
+ *
  * ```html
  * <cc-whatsapp-button [href]="whatsappLink" />
- * <cc-whatsapp-button [href]="whatsappLink" iconSrc="assets/icons/whatsapp.png" position="left" />
+ * <cc-whatsapp-button [href]="whatsappLink" variant="extended" label="Reservar" position="left" />
  * ```
+ *
+ * Tokens: --cc-whatsapp, --cc-whatsapp-hover, --cc-whatsapp-size, --cc-whatsapp-offset-x,
+ * --cc-whatsapp-offset-y.
  */
 export declare class WhatsappButtonComponent {
     /** WhatsApp link. Build it with `whatsappUrl(phone, message)`. */
     readonly href: import("@angular/core").InputSignal<string>;
     /** Custom icon. Without it, the WhatsApp logo is drawn as SVG. */
     readonly iconSrc: import("@angular/core").InputSignal<string>;
+    /** Accessible name, and the visible text in the `extended` variant. */
     readonly label: import("@angular/core").InputSignal<string>;
+    readonly variant: import("@angular/core").InputSignal<"icon" | "extended">;
+    readonly size: import("@angular/core").InputSignal<"sm" | "md">;
     readonly position: import("@angular/core").InputSignal<"right" | "left">;
     static ɵfac: i0.ɵɵFactoryDeclaration<WhatsappButtonComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<WhatsappButtonComponent, "cc-whatsapp-button", never, { "href": { "alias": "href"; "required": true; "isSignal": true; }; "iconSrc": { "alias": "iconSrc"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "position": { "alias": "position"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<WhatsappButtonComponent, "cc-whatsapp-button", never, { "href": { "alias": "href"; "required": true; "isSignal": true; }; "iconSrc": { "alias": "iconSrc"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "position": { "alias": "position"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }

package/ui/lib/models/promo.models.d.ts

@@ -0,0 +1,25 @@
+/**
+ * The site's promotional popup, as the CMS stores it (`promo.json`). The site passes it to
+ * `cc-promo-modal`; `promoState()` and `promoRememberKey()` decide when it shows.
+ */
+export interface PromoConfig {
+    /** Off hides the popup whatever the dates say. */
+    active: boolean;
+    imageSrc: string;
+    /** Describes the image for screen readers and search engines. */
+    imageAlt: string;
+    /** Call to action. Empty hides the button. */
+    ctaLabel: string;
+    /** WhatsApp message the button opens. Empty makes the button open the general chat. */
+    message: string;
+    /** Seconds after the page loads before the popup opens. */
+    delaySeconds: number;
+    /** Days before it shows again to someone who closed it. 0 shows it on every visit. */
+    repeatDays: number;
+    /** First day it shows (YYYY-MM-DD, site's local time). Empty: from now on. */
+    startDate: string;
+    /** Last day it shows, included (YYYY-MM-DD). Empty: no end. */
+    endDate: string;
+}
+/** Where a promotion is in its life, for the CMS and for the site. */
+export type PromoState = 'off' | 'scheduled' | 'running' | 'ended' | 'incomplete';

package/ui/lib/utils/promo.utils.d.ts

@@ -0,0 +1,18 @@
+import { PromoConfig, PromoState } from '../models/promo.models';
+/** Today's date as YYYY-MM-DD in the local time zone. */
+export declare function localDate(now?: Date): string;
+/**
+ * Where the promotion is on a given day:
+ * - `off`: switched off.
+ * - `incomplete`: on, but without an image.
+ * - `scheduled`: before `startDate`.
+ * - `ended`: after `endDate`.
+ * - `running`: shows.
+ */
+export declare function promoState(promo: PromoConfig | null | undefined, now?: Date): PromoState;
+export declare function isPromoRunning(promo: PromoConfig | null | undefined, now?: Date): boolean;
+/**
+ * localStorage key that remembers who closed the popup. It changes when the image or the
+ * dates change, so a new promotion shows again to people who closed the previous one.
+ */
+export declare function promoRememberKey(promo: PromoConfig): string;

package/ui/lib/utils/text.utils.d.ts

@@ -13,3 +13,13 @@ export declare function truncateText(text: string, max?: number): string;
  * @param message Pre-filled message, optional.
  */
 export declare function whatsappUrl(phone: string, message?: string): string;
+export interface PriceFormat {
+    /** BCP 47 locale. Defaults to "es-CO", which prints 259900 as "$ 259.900". */
+    locale?: string;
+    /** ISO 4217 code. Defaults to "COP". */
+    currency?: string;
+    /** Decimals to show. Defaults to 0. */
+    digits?: number;
+}
+/** Formats a price with `Intl.NumberFormat`: formatPrice(259900) -> "$ 259.900". */
+export declare function formatPrice(value: number, { locale, currency, digits }?: PriceFormat): string;

package/ui/public-api.d.ts

@@ -1,9 +1,15 @@
 export * from './lib/models/plan.models';
 export * from './lib/models/ui.models';
+export * from './lib/models/promo.models';
 export * from './lib/utils/text.utils';
 export * from './lib/utils/plan.utils';
+export * from './lib/utils/promo.utils';
 export * from './lib/services/plan-catalog.service';
 export * from './lib/services/seo.service';
+export * from './lib/components/button/button.component';
+export * from './lib/components/section-heading/section-heading.component';
+export * from './lib/components/notice/notice.component';
+export * from './lib/components/faq-item/faq-item.component';
 export * from './lib/components/whatsapp-button/whatsapp-button.component';
 export * from './lib/components/promo-modal/promo-modal.component';
 export * from './lib/components/page-banner/page-banner.component';

package/ui/theme/component-base.css

@@ -0,0 +1,136 @@
+/*
+ * Shared base for every @c-code/c-code-fw/ui component. Each component lists this file
+ * first in `styleUrls`, so the rules below are scoped to that component.
+ *
+ * The library does not own any brand. It reads a contract of semantic roles (--cc-*)
+ * that each site defines from its own palette and fonts, and resolves them into private
+ * --_* variables on the component host. Without a site theme, components render in
+ * neutral grays. Resolution happens on each host, so a role set on any ancestor element
+ * re-themes the components inside it.
+ *
+ * Structure (spacing, type scale, radii, shadows, motion) does belong to the library:
+ * those tokens have library defaults and components expose props to pick from them.
+ */
+:host {
+  /* ---- Color roles: defined by the site ---- */
+  --_canvas: var(--cc-canvas, #ffffff); /* page background behind components */
+  --_surface: var(--cc-surface, #f5f5f4); /* cards, panels */
+  --_surface-alt: var(--cc-surface-alt, #fafaf9); /* alternative band, image placeholders */
+  --_text: var(--cc-text, #292524);
+  --_text-muted: var(--cc-text-muted, color-mix(in srgb, var(--_text) 72%, transparent));
+  --_heading: var(--cc-heading, #1c1917);
+  --_accent: var(--cc-accent, #1c1917); /* primary buttons, active items */
+  --_accent-hover: var(--cc-accent-hover, #44403c);
+  --_accent-text: var(--cc-accent-text, var(--_heading)); /* accent used as text, ≥4.5:1 */
+  --_on-accent: var(--cc-on-accent, #ffffff);
+  --_inverse: var(--cc-inverse, #1c1917); /* dark blocks: price badge, dark buttons */
+  --_inverse-hover: var(--cc-inverse-hover, #000000);
+  --_on-inverse: var(--cc-on-inverse, #ffffff);
+  --_border: var(--cc-border, #d6d3d1);
+  --_border-strong: var(--cc-border-strong, #78716c); /* inputs, ≥3:1 on white */
+  --_focus-ring: var(--cc-focus-ring, var(--_heading));
+  --_overlay: var(--cc-overlay, rgb(0 0 0 / 0.7));
+  --_danger: var(--cc-danger, #b91c1c);
+  --_danger-surface: var(--cc-danger-surface, #fef2f2);
+  --_on-danger-surface: var(--cc-on-danger-surface, #7f1d1d);
+  --_whatsapp: var(--cc-whatsapp, #1faf38);
+  --_whatsapp-hover: var(--cc-whatsapp-hover, #17902d);
+  --_on-whatsapp: var(--cc-on-whatsapp, #ffffff);
+
+  /* ---- Typography roles: defined by the site ---- */
+  --_font-body: var(--cc-font-body, inherit);
+  --_font-heading: var(--cc-font-heading, inherit);
+  --_heading-style: var(--cc-heading-style, normal); /* normal | italic */
+  --_heading-transform: var(--cc-heading-transform, none); /* none | uppercase */
+  --_heading-tracking: var(--cc-heading-tracking, normal);
+
+  /* ---- Structure: owned by the library ---- */
+  --_text-xs: var(--cc-text-xs, 0.75rem);
+  --_text-sm: var(--cc-text-sm, 0.875rem);
+  --_text-md: var(--cc-text-md, 1rem);
+  --_text-lg: var(--cc-text-lg, 1.125rem);
+  --_text-xl: var(--cc-text-xl, 1.25rem);
+  --_text-2xl: var(--cc-text-2xl, 1.5rem);
+  --_text-3xl: var(--cc-text-3xl, clamp(1.625rem, 1.2rem + 1.6vw, 2rem));
+  --_text-4xl: var(--cc-text-4xl, clamp(2rem, 1.4rem + 2.4vw, 2.75rem));
+  --_leading-tight: var(--cc-leading-tight, 1.2);
+  --_leading-snug: var(--cc-leading-snug, 1.4);
+  --_leading-body: var(--cc-leading-body, 1.6);
+  --_weight-regular: var(--cc-weight-regular, 400);
+  --_weight-medium: var(--cc-weight-medium, 500);
+  --_weight-semibold: var(--cc-weight-semibold, 600);
+  --_weight-bold: var(--cc-weight-bold, 700);
+  --_tracking-wide: var(--cc-tracking-wide, 0.04em);
+
+  --_space-1: var(--cc-space-1, 0.25rem);
+  --_space-2: var(--cc-space-2, 0.5rem);
+  --_space-3: var(--cc-space-3, 0.75rem);
+  --_space-4: var(--cc-space-4, 1rem);
+  --_space-5: var(--cc-space-5, 1.25rem);
+  --_space-6: var(--cc-space-6, 1.5rem);
+  --_space-8: var(--cc-space-8, 2rem);
+  --_space-10: var(--cc-space-10, 2.5rem);
+  --_space-12: var(--cc-space-12, 3rem);
+  --_space-16: var(--cc-space-16, 4rem);
+  --_space-20: var(--cc-space-20, 5rem);
+  --_space-24: var(--cc-space-24, 6rem);
+
+  --_radius: var(--cc-radius, 0);
+  --_radius-sm: var(--cc-radius-sm, 0.125rem);
+  --_radius-md: var(--cc-radius-md, 0.5rem);
+  --_radius-lg: var(--cc-radius-lg, 1rem);
+  --_radius-pill: var(--cc-radius-pill, 9999px);
+  --_shadow-sm: var(--cc-shadow-sm, 0 1px 2px 0 rgb(0 0 0 / 0.05));
+  --_shadow: var(--cc-shadow, 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1));
+  --_shadow-lg: var(--cc-shadow-lg, 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1));
+  --_shadow-xl: var(--cc-shadow-xl, 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1));
+
+  --_focus-width: var(--cc-focus-width, 2px);
+  --_focus-offset: var(--cc-focus-offset, 2px);
+  --_control-height: var(--cc-control-height, 2.75rem);
+  --_control-height-sm: var(--cc-control-height-sm, 2.25rem);
+  --_control-height-lg: var(--cc-control-height-lg, 3.25rem);
+  --_duration-fast: var(--cc-duration-fast, 150ms);
+  --_duration: var(--cc-duration, 250ms);
+  --_ease: var(--cc-ease, cubic-bezier(0.2, 0, 0, 1));
+  --_z-float: var(--cc-z-float, 20);
+  --_z-sticky: var(--cc-z-sticky, 30);
+  --_z-overlay: var(--cc-z-overlay, 50);
+
+  box-sizing: border-box;
+  font-family: var(--_font-body);
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+:focus-visible {
+  outline: var(--_focus-width) solid var(--_focus-ring);
+  outline-offset: var(--_focus-offset);
+}
+
+/* Visually hidden text for screen readers. */
+.cc-sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}

package/ui/theme/tokens.css

@@ -1,45 +1,111 @@
-/*
- * Design tokens for @c-code/c-code-fw/ui.
- *
- * The components already fall back to these values, so this file is optional.
- * To apply a site's palette, set the variables in its global styles:
- *
- *   :root {
- *     --cc-primary: #4C6B4A;
- *     --cc-secondary: #CEAB5D;
- *   }
- *
- * The overrides work on any element, not just :root, so a section can use its own palette.
- *
- * ROLES (optional). By default each role follows a palette color. Set a role only
- * when a site needs it to differ from its palette:
- *
- *   --cc-surface       cards, sidebar, detail panel  (default --cc-secondary-light)
- *   --cc-text          text inside components        (default --cc-primary)
- *   --cc-heading       titles and the price badge    (default --cc-primary)
- *   --cc-accent        buttons and highlighted text  (default --cc-secondary)
- *   --cc-accent-hover  button hover                  (default --cc-secondary-dark)
- *   --cc-on-accent     text on buttons and badges    (default --cc-bg)
- *
- * Each component also has its own variables (for example --cc-plan-card-bg).
- * They are listed in the README.
- */
-:root {
-  /* Palette */
-  --cc-primary: #4c6b4a;
-  --cc-primary-light: #a0ba9e;
-  --cc-primary-dark: #022b04;
-  --cc-secondary: #ceab5d;
-  --cc-secondary-light: #f8f4ee;
-  --cc-secondary-dark: #9a7521;
-  --cc-bg: #f0ffef;
-
-  /* Typography */
-  --cc-font-body: inherit;
-  --cc-font-heading: inherit;
-
-  /* Shape */
-  --cc-radius: 0;
-  --cc-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
-  --cc-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
-}
+/*
+ * Structural tokens of @c-code/c-code-fw/ui: type scale, spacing, radii, shadows,
+ * controls, motion and layers.
+ *
+ * Every component already falls back to these values, so this file is optional. Load it
+ * (angular.json → styles) when the site wants to use the same scales in its own markup,
+ * for example by mapping Tailwind's font sizes and spacing to var(--cc-text-*) and
+ * var(--cc-space-*). Override any of them to change the rhythm of a whole site.
+ *
+ * COLORS AND FONTS ARE NOT HERE. They belong to each site. The components read this
+ * contract of roles, which the site sets from its own palette (with any variable names):
+ *
+ *   --cc-canvas            page background behind components
+ *   --cc-surface           cards, panels, sidebar
+ *   --cc-surface-alt       alternative band, image placeholders
+ *   --cc-text              body text
+ *   --cc-text-muted        counters, metadata (default: --cc-text at 72%)
+ *   --cc-heading           titles
+ *   --cc-accent            primary buttons, active items
+ *   --cc-accent-hover      primary button hover
+ *   --cc-accent-text       accent used as text; needs 4.5:1 on --cc-canvas and --cc-surface
+ *   --cc-on-accent         text on --cc-accent; needs 4.5:1
+ *   --cc-inverse           dark blocks: price badge, dark buttons
+ *   --cc-inverse-hover
+ *   --cc-on-inverse        text on --cc-inverse
+ *   --cc-border            dividers
+ *   --cc-border-strong     input borders, 3:1 on --cc-canvas
+ *   --cc-focus-ring        keyboard focus outline
+ *   --cc-overlay           modal and lightbox backdrop
+ *   --cc-danger, --cc-danger-surface, --cc-on-danger-surface   warnings
+ *   --cc-whatsapp, --cc-whatsapp-hover                         WhatsApp buttons
+ *   --cc-font-body, --cc-font-heading                          font families
+ *   --cc-heading-style (normal|italic), --cc-heading-transform, --cc-heading-tracking
+ *
+ * Example, in the site's styles.css:
+ *
+ *   :root {
+ *     --laurel-green: #4c6b4a;
+ *     --laurel-gold: #ceab5d;
+ *     --cc-heading: var(--laurel-green);
+ *     --cc-accent: var(--laurel-gold);
+ *     --cc-on-accent: #022b04;
+ *   }
+ *
+ * Without a site theme the components render in neutral grays.
+ *
+ * Breakpoints (media queries cannot use variables): sm 640px, md 768px, lg 1024px, xl 1280px.
+ */
+:root {
+  /* Type scale */
+  --cc-text-xs: 0.75rem;
+  --cc-text-sm: 0.875rem;
+  --cc-text-md: 1rem;
+  --cc-text-lg: 1.125rem;
+  --cc-text-xl: 1.25rem;
+  --cc-text-2xl: 1.5rem;
+  --cc-text-3xl: clamp(1.625rem, 1.2rem + 1.6vw, 2rem);
+  --cc-text-4xl: clamp(2rem, 1.4rem + 2.4vw, 2.75rem);
+  --cc-leading-tight: 1.2;
+  --cc-leading-snug: 1.4;
+  --cc-leading-body: 1.6;
+  --cc-weight-regular: 400;
+  --cc-weight-medium: 500;
+  --cc-weight-semibold: 600;
+  --cc-weight-bold: 700;
+  --cc-tracking-wide: 0.04em;
+
+  /* Spacing (4px base, same steps as Tailwind) */
+  --cc-space-1: 0.25rem;
+  --cc-space-2: 0.5rem;
+  --cc-space-3: 0.75rem;
+  --cc-space-4: 1rem;
+  --cc-space-5: 1.25rem;
+  --cc-space-6: 1.5rem;
+  --cc-space-8: 2rem;
+  --cc-space-10: 2.5rem;
+  --cc-space-12: 3rem;
+  --cc-space-16: 4rem;
+  --cc-space-20: 5rem;
+  --cc-space-24: 6rem;
+
+  /* Shape */
+  --cc-radius: 0; /* surfaces: cards, panels */
+  --cc-radius-sm: 0.125rem;
+  --cc-radius-md: 0.5rem;
+  --cc-radius-lg: 1rem;
+  --cc-radius-pill: 9999px;
+  --cc-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  --cc-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  --cc-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+  --cc-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+
+  /* Focus */
+  --cc-focus-width: 2px;
+  --cc-focus-offset: 2px;
+
+  /* Controls */
+  --cc-control-height: 2.75rem; /* 44px minimum tap target */
+  --cc-control-height-sm: 2.25rem;
+  --cc-control-height-lg: 3.25rem;
+
+  /* Motion */
+  --cc-duration-fast: 150ms;
+  --cc-duration: 250ms;
+  --cc-ease: cubic-bezier(0.2, 0, 0, 1);
+
+  /* Layers */
+  --cc-z-float: 20;
+  --cc-z-sticky: 30;
+  --cc-z-overlay: 50;
+}