/* ==========================================================================
   nubarchiva – tokens.css (extended)
   Layers:
   1) Primitives: raw values (HSL, spacing, radius, etc.)
   2) Semantics: domain meanings (text, surface, brand, states, etc.)
   3) Component defaults can live in components.css using these semantics.
   ========================================================================== */

:root {
    /* ---------------------------------------------
     * 1) PRIMITIVES (raw/base tokens)
     * -------------------------------------------*/

    /* 1.1 Color – Primary brand in HSL for flexibility */
    --nb-color-primary-h: 219;
    --nb-color-primary-s: 41%;
    --nb-color-primary-l: 46%;

    /* 1.2 Neutral scale (grays) */
    --nb-gray-0: #ffffff;
    --nb-gray-50: #fafbfc;
    --nb-gray-100: #f5f6f8;
    --nb-gray-200: #eceef1;
    --nb-gray-300: #e3e5e8;
    --nb-gray-400: #cfd4da;
    --nb-gray-500: #b6bcc5;
    --nb-gray-600: #8b93a1;
    --nb-gray-700: #6a7180;
    --nb-gray-800: #474d59;
    --nb-gray-900: #1b1b1f;
    --nb-gray-1000: #0b0c0f;

    /* 1.3 Spacing scale (4px base) */
    --nb-space-1: 0.25rem; /* 4px  */
    --nb-space-2: 0.5rem;  /* 8px  */
    --nb-space-3: 0.75rem; /* 12px */
    --nb-space-4: 1rem;    /* 16px */
    --nb-space-5: 1.25rem; /* 20px */
    --nb-space-6: 1.5rem;  /* 24px */
    --nb-space-8: 2rem;    /* 32px */
    --nb-space-10: 2.5rem; /* 40px */
    --nb-space-12: 3rem;   /* 48px */

    /* 1.4 Typography */
    --nb-root-font-compact: 14px;
    --nb-root-font-default: 16px;
    --nb-root-font--comfort: 18px;

    --nb-font-family-sans: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    --nb-font-family-serif: Georgia, "Times New Roman", serif;
    --nb-font-family-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;

    --nb-font-size-xs: 0.75rem;
    --nb-font-size-sm: 0.875rem;
    --nb-font-size-md: 1rem;
    --nb-font-size-lg: 1.125rem;
    --nb-font-size-xl: 1.25rem;
    --nb-font-size-2xl: 1.5rem;
    --nb-font-size-3xl: 1.875rem;

    --nb-line-height-sm: 1.25;
    --nb-line-height-md: 1.5;
    --nb-line-height-lg: 1.75;

    --nb-font-weight-normal: 400;
    --nb-font-weight-medium: 500;
    --nb-font-weight-bold: 700;

    /* 1.5 Radius & Shadows */
    --nb-radius-xs: 4px;
    --nb-radius-sm: 6px;
    --nb-radius-md: 10px;
    --nb-radius-lg: 14px;
    --nb-radius-pill: 999px;

    --nb-shadow-sm: 0 1px 3px rgba(0, 0, 0, .08);
    --nb-shadow-md: 0 4px 10px rgba(0, 0, 0, .10);
    --nb-shadow-lg: 0 10px 24px rgba(0, 0, 0, .12);

    /* 1.6 Z-index layers */
    --nb-z-base: 1;
    --nb-z-sticky: 100;
    --nb-z-dropdown: 1100;
    --nb-z-tooltip: 1200;
    --nb-z-modal: 1300;
    --nb-z-toast: 1400;

    /* 1.7 Transitions & Easing */
    --nb-duration-fast: 120ms;
    --nb-duration-normal: 240ms;
    --nb-duration-slow: 480ms;

    --nb-ease-in: cubic-bezier(0.4, 0, 1, 1);
    --nb-ease-out: cubic-bezier(0, 0, 0.2, 1);
    --nb-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

    /* 1.8 Layout & Breakpoints */
    --nb-container-max: 1200px;
    --nb-sidebar-width: 280px;
    --nb-navbar-height: 64px;

    --nb-breakpoint-sm: 576px;
    --nb-breakpoint-md: 768px;
    --nb-breakpoint-lg: 992px;
    --nb-breakpoint-xl: 1200px;

    /* 1.9 Opacity / Interaction primitives */
    --nb-opacity-disabled: 0.45;
    --nb-opacity-overlay: 0.6;
    --nb-hover-scale: 1.02;

    /* 1.10 Direction (i18n) */
    --nb-direction: ltr;

    /* 1.11 Densidad (factor multiplicador). */
    --nb-density-scale-compact: 0.85;
    --nb-density-scale-cozy: 1;
    --nb-density-scale-comfortable: 1.15;
}

:root {
    /* ---------------------------------------------
     * 2) SEMANTICS (domain meanings)
     * -------------------------------------------*/

    /* 2.1 Brand */
    --nb-primary: hsl(var(--nb-color-primary-h) var(--nb-color-primary-s) var(--nb-color-primary-l));
    --nb-primary-contrast: #ffffff;

    --nb-secondary: #00bcd4;
    --nb-accent: #ffc107;

    /* 2.2 Text */
    --nb-text-primary: var(--nb-gray-900);
    --nb-text-secondary: #666666;
    --nb-text-inverse: #ffffff;
    --nb-text-muted: #8b93a1;
    --nb-text-link: var(--nb-primary);
    --nb-text-link-hover: color-mix(in srgb, var(--nb-primary) 90%, #000 10%);

    /* 2.3 Surfaces & Body */
    --nb-bg-body: var(--nb-gray-0);
    --nb-bg-surface: var(--nb-gray-200);
    --nb-bg-overlay: rgba(0, 0, 0, var(--nb-opacity-overlay));

    /* 2.4 Borders & Dividers */
    --nb-border-default: var(--nb-gray-300);
    --nb-border-strong: var(--nb-gray-400);
    --nb-border-radius-base: var(--nb-radius-xs);

    /* 2.5 Focus/Outlines */
    --nb-focus-outline-width: 2px;
    --nb-focus-ring: var(--nb-focus-outline-width) solid hsl(var(--nb-color-primary-h) 90% 50%);
    --nb-outline-contrast: 2px solid #000;

    /* 2.6 Navigation */
    --nb-navbar-bg: var(--nb-primary);
    --nb-navbar-fg: var(--nb-primary-contrast);

    --nb-sidebar-bg: var(--nb-bg-surface);
    --nb-sidebar-fg: var(--nb-text-primary);

    /* 2.7 Forms */
    --nb-density-scale: var(--nb-density-scale-cozy);
    --nb-control-font: var(--nb-font-size-md);
    --nb-control-pad-x-base: var(--nb-space-3);             /* 0.75rem la escala */
    --nb-control-pad-y-base: calc(var(--nb-space-2) - 1px); /* 0.5rem - 1px, ajusta alto BS3 */
    --nb-control-radius: var(--nb-border-radius-base);

    --nb-control-pad-x: calc(var(--nb-control-pad-x-base) * var(--nb-density-scale));
    --nb-control-pad-y: calc(var(--nb-control-pad-y-base) * var(--nb-density-scale));
    --nb-control-min-height: calc(var(--nb-control-font) * 2 * var(--nb-density-scale));

    --nb-input-bg: #ffffff;
    --nb-input-fg: var(--nb-text-primary);
    --nb-input-bg-readonly: var(--nb-bg-surface);
    --nb-input-fg-muted: var(--nb-text-secondary);
    --nb-input-border: var(--nb-border-default);
    --nb-input-border-focus: var(--nb-primary);
    --nb-input-placeholder: #888888;
    --nb-label-fg: var(--nb-text-secondary);

    --nb-check-size: 1.1rem;
    --nb-check-border: var(--nb-border-default);

    /* 2.8 Tables */
    --nb-table-header-bg: var(--nb-bg-surface);
    --nb-table-header-fg: var(--nb-text-primary);
    --nb-table-row-hover-bg: #f3f6fb;
    --nb-table-border: var(--nb-border-default);
    --nb-table-footer-bg: var(--nb-bg-surface);
    --nb-table-footer-fg: var(--nb-text-primary);

    /* 2.9 Status (generic UI states) */
    --nb-status-success: #1e9e67;
    --nb-status-warning: #e1a60a;
    --nb-status-error: #d33b2f;
    --nb-status-info: #2182f3;
    --nb-status-contrast: #ffffff;

    /* 2.10 Controls – Buttons */
    --nb-btn-default-bg: var(--nb-bg-surface);
    --nb-btn-default-fg: var(--nb-text-primary);
    --nb-btn-default-border: var(--nb-border-default);
    --nb-btn-pad-x: calc(var(--nb-control-pad-x-base) * var(--nb-density-scale));
    --nb-btn-pad-y: calc(var(--nb-control-pad-y-base) * var(--nb-density-scale));
    --nb-btn-radius: var(--nb-border-radius-base);

    --nb-btn-default-bg-hover: color-mix(in srgb, var(--nb-btn-default-bg) 88%, #fff 12%);
    --nb-btn-default-border-hover: var(--nb-border-strong);

    --nb-btn-primary-bg: var(--nb-primary);
    --nb-btn-primary-fg: var(--nb-primary-contrast);
    --nb-btn-primary-border: color-mix(in srgb, var(--nb-btn-primary-bg) 85%, #000 15%);
    --nb-btn-primary-bg-hover: color-mix(in srgb, var(--nb-btn-primary-bg) 92%, #000 8%);
    --nb-btn-primary-border-hover: color-mix(in srgb, var(--nb-btn-primary-bg) 75%, #000 25%);

    --nb-btn-link-fg: var(--nb-text-link);
    --nb-btn-link-fg-hover: var(--nb-text-link-hover);

    --nb-btn-disabled-opacity: var(--nb-opacity-disabled);

    --nb-btn-success-bg: var(--nb-status-success);
    --nb-btn-success-fg: var(--nb-status-contrast);
    --nb-btn-success-border: color-mix(in srgb, var(--nb-status-success) 85%, #000 15%);
    --nb-btn-success-bg-hover: color-mix(in srgb, var(--nb-status-success) 92%, #000 8%);
    --nb-btn-success-border-hover: color-mix(in srgb, var(--nb-status-success) 75%, #000 25%);

    --nb-btn-info-bg: var(--nb-status-info);
    --nb-btn-info-fg: var(--nb-status-contrast);
    --nb-btn-info-border: color-mix(in srgb, var(--nb-status-info) 85%, #000 15%);
    --nb-btn-info-bg-hover: color-mix(in srgb, var(--nb-status-info) 92%, #000 8%);
    --nb-btn-info-border-hover: color-mix(in srgb, var(--nb-status-info) 75%, #000 25%);

    --nb-btn-warning-bg: var(--nb-status-warning);
    --nb-btn-warning-fg: #000; /* mejor contraste en warning */
    --nb-btn-warning-border: color-mix(in srgb, var(--nb-status-warning) 85%, #000 15%);
    --nb-btn-warning-bg-hover: color-mix(in srgb, var(--nb-status-warning) 90%, #000 10%);
    --nb-btn-warning-border-hover: color-mix(in srgb, var(--nb-status-warning) 70%, #000 30%);

    --nb-btn-danger-bg: var(--nb-status-error);
    --nb-btn-danger-fg: var(--nb-status-contrast);
    --nb-btn-danger-border: color-mix(in srgb, var(--nb-status-error) 85%, #000 15%);
    --nb-btn-danger-bg-hover: color-mix(in srgb, var(--nb-status-error) 92%, #000 8%);
    --nb-btn-danger-border-hover: color-mix(in srgb, var(--nb-status-error) 75%, #000 25%);

    /* 2.11 Typography semantics */
    --nb-root-font-size: var(--nb-root-font-default);

    --nb-font-body-family: var(--nb-font-family-sans);
    --nb-font-heading-family: var(--nb-font-family-sans);
    --nb-font-code-family: var(--nb-font-family-mono);

    --nb-font-body-size-small: var(--nb-font-size-sm);
    --nb-font-body-size: var(--nb-font-size-md);
    --nb-font-body-size-bigger: var(--nb-font-size-lg);

    --nb-font-body-weight: var(--nb-font-weight-normal);
    --nb-font-body-line: var(--nb-line-height-md);

    --nb-font-heading-weight: var(--nb-font-weight-bold);
    --nb-font-heading-line: 1.25;

    --nb-letter-spacing-tight: -0.01em;
    --nb-letter-spacing-normal: 0;
    --nb-letter-spacing-wide: 0.02em;

    --nb-h1-size: var(--nb-font-size-3xl);
    --nb-h2-size: var(--nb-font-size-2xl);
    --nb-h3-size: var(--nb-font-size-xl);
    --nb-h4-size: var(--nb-font-size-lg);
    --nb-h5-size: var(--nb-font-size-md);
    --nb-h6-size: var(--nb-font-size-sm);

    --nb-h1-color: var(--nb-text-primary);
    --nb-h2-color: var(--nb-text-primary);
    --nb-h3-color: var(--nb-text-primary);
    --nb-h4-color: var(--nb-text-primary);
    --nb-h5-color: var(--nb-text-primary);
    --nb-h6-color: var(--nb-text-primary);

    --nb-code-font-size: 0.95em;

    --nb-text-measure: 68ch;
}