/*
 * Tokens are the single visual vocabulary shared by the store and the private workspace.
 * Components consume semantic roles; raw colours stay in this file.
 */
@layer tokens {
  :root {
    /* Cocoa */
    --ramp-cocoa-950: #211512;
    --ramp-cocoa-900: #2d1b16;
    --ramp-cocoa-800: #3c271f;
    --ramp-cocoa-700: #51372b;
    --ramp-cocoa-600: #6b4b3a;

    /* Caramel */
    --ramp-caramel-700: #8a5a32;
    --ramp-caramel-600: #a66e3f;
    --ramp-caramel-500: #b97844;
    --ramp-caramel-300: #d6aa78;

    /* Botanical */
    --ramp-botanical-700: #526248;
    --ramp-botanical-500: #7e8b6a;
    --ramp-botanical-100: #eef1eb;

    /* Neutral and brand surfaces */
    --ramp-white: #ffffff;
    --ramp-paper: #fffdfc;
    --ramp-beige-100: #f7f1df;
    --ramp-beige-200: #ede2c8;
    --ramp-neutral-100: #f8f7f4;
    --ramp-neutral-200: #f1eeea;
    --ramp-neutral-300: #ddd5ce;
    --ramp-cream: #faf4dc;
    --ramp-warm: #f4e7d6;

    /* Text and state */
    --ramp-text-primary: #261914;
    --ramp-text-muted: #66564e;
    --ramp-success: #256442;
    --ramp-warning: #913d50;
    --ramp-danger: #9a352d;
    --ramp-information: #17616b;
    --ramp-progress: #245b70;

    /* Stable aliases used by existing public-store modules. */
    --ramp-ink: var(--ramp-cocoa-950);
    --ramp-caramel: var(--ramp-caramel-500);
    --ramp-canvas: var(--ramp-paper);

    /* Surfaces */
    --surface-page: var(--ramp-beige-100);
    --surface-canvas: var(--ramp-paper);
    --surface-raised: var(--ramp-white);
    --surface-brand: var(--ramp-cream);
    --surface-brand-strong: var(--ramp-beige-200);
    --surface-muted: var(--ramp-neutral-200);
    --surface-inverse: var(--ramp-cocoa-900);
    /*
     * La banda de una barra de filtros o de búsqueda. Es blanca a propósito: se apoya sobre la página
     * beige y arriba de una tabla blanca, así que teñirla de crema dejaba tres tonos del mismo color
     * uno encima del otro y ningún borde donde apoyar la vista. El beige queda para el hover.
     */
    --surface-toolbar: var(--ramp-white);

    /* Content and boundaries */
    --text-primary: var(--ramp-text-primary);
    --text-muted: var(--ramp-text-muted);
    --text-inverse: var(--ramp-white);
    --border-hairline: var(--ramp-beige-200);
    --border-strong: var(--ramp-text-muted);

    /* Brand accents are secondary to content and actions. */
    --accent-caramel: var(--ramp-caramel-700);

    /* Semantic status colours always travel with a label or icon. */
    --status-success: var(--ramp-success);
    --status-warning: var(--ramp-warning);
    --status-danger: var(--ramp-danger);
    --status-information: var(--ramp-information);
    --status-progress: var(--ramp-progress);
    --surface-success-soft: #e2f1e8;
    --surface-warning-soft: #f7e6eb;
    --surface-danger-soft: #f8e3dd;
    --surface-information-soft: #e1f1f1;
    --surface-progress-soft: #e0eff5;

    /* Controls */
    --control-surface: var(--ramp-cocoa-900);
    --control-text: var(--text-inverse);
    --control-border: var(--ramp-cocoa-900);
    --control-quiet-text: var(--text-primary);
    --control-surface-hover: var(--ramp-cocoa-800);
    --control-surface-active: var(--ramp-cocoa-950);
    --control-disabled-surface: var(--surface-muted);
    --control-disabled-text: var(--text-muted);
    --control-disabled-border: var(--border-hairline);
    --field-surface: var(--surface-raised);
    --field-border: var(--border-strong);
    --field-border-invalid: var(--status-danger);
    --focus-ring: var(--ramp-caramel-700);
    --surface-hover: color-mix(in srgb, var(--ramp-cocoa-900) 7%, transparent);
    --surface-pressed: color-mix(in srgb, var(--ramp-cocoa-900) 13%, transparent);

    /* Spacing and shape */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;
    --radius-control: 8px;
    --radius-surface: 12px;
    --radius-pill: 999px;
    --measure: 34rem;
    --measure-wide: 78rem;
    --touch-target: 44px;

    /* Typography */
    --font-body:
      ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --font-editorial: ui-serif, Georgia, Cambria, 'Times New Roman', serif;
    --font-numeric: ui-monospace, 'SFMono-Regular', 'Cascadia Mono', 'Segoe UI Mono', monospace;
    --text-size-caption: 0.75rem;
    --text-size-small: 0.8125rem;
    --text-size-meta: 0.875rem;
    --text-size-body: 1rem;
    --text-size-lead: 1.125rem;
    --text-size-amount: 1.25rem;
    --text-size-title: 1.5rem;
    --weight-regular: 400;
    --weight-medium: 500;
    --weight-strong: 600;
    --weight-code: 700;

    /* Motion and overlays */
    --motion-quick: 150ms;
    --motion-settle: 190ms;
    --motion-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --overlay-scrim: color-mix(in srgb, var(--ramp-cocoa-950) 72%, transparent);
    --shadow-floating: 0 18px 50px color-mix(in srgb, var(--ramp-cocoa-950) 18%, transparent);
    --shadow-soft: 0 8px 28px color-mix(in srgb, var(--ramp-cocoa-950) 9%, transparent);
    --shadow-control: 0 2px 8px color-mix(in srgb, var(--ramp-cocoa-950) 8%, transparent);
  }
}