/* =========================================================================
   TRICLO DESIGN TOKENS
   Version 0.2 — Colors + Layout
   
   This file will grow in subsequent iterations to include spacing, radii,
   shadows, breakpoints, and motion. For now it defines the complete colour
   system: raw palette + semantic aliases.
   
   USAGE:
     <link rel="stylesheet" href="triclo-tokens.css">
   Then reference variables in your CSS:
     color: var(--color-text-primary);
     background: var(--color-bg-subtle);
   
   Prefer semantic tokens (--color-text-*, --color-bg-*, --color-border-*)
   over raw palette tokens (--color-blue-*, --color-gray-*) whenever possible.
   Raw tokens are for when the semantic layer doesn't cover a case.
   ========================================================================= */


/* ---- Raw palette -------------------------------------------------------- */
/* HEX values are the source of truth for digital use. CMYK equivalents are
   documented in triclo-tokens.json for print handoff.                       */

:root {
  /* Brand blue scale — the Triclo anchor color */
  --color-brand-blue:          #0a2847;   /* Primary — CMYK C:100 M:85 Y:0 K:25 */
  --color-brand-blue-dark:     #061f38;   /* Darker  — CMYK C:100 M:85 Y:0 K:40 */
  --color-brand-blue-darkest:  #020c14;   /* Darkest — CMYK C:100 M:85 Y:0 K:75 */

  /* Accent blue — more saturated, for secondary highlights */
  --color-blue-accent:         #004a99;   /* CMYK C:100 M:90 Y:10 K:0 */

  /* Light blue tints — backgrounds, surfaces, subtle fills */
  --color-blue-50:             #edecf7;   /* CMYK C:10 M:5  Y:0 K:0 */
  --color-blue-100:            #dcdaee;   /* CMYK C:20 M:10 Y:0 K:0 */
  --color-blue-200:            #c9c7e5;   /* CMYK C:30 M:15 Y:0 K:0 */

  /* Neutral grays */
  --color-gray-50:             #f5f5f5;   /* CMYK K:10 */
  --color-gray-200:            #d9d9d9;   /* CMYK K:20 */
  --color-gray-500:            #666666;   /* CMYK K:50 */

  /* Pure values */
  --color-white:               #ffffff;
  --color-black:               #000000;

  /* Category accents — product family identification */
  --color-accent-yellow:       #ffde00;   /* Carrocería — CMYK C:0  M:15  Y:100 K:0 */
  --color-accent-green:        #6dbc3d;   /* Mecánica   — CMYK C:45 M:0   Y:100 K:0 */
  --color-accent-red:          #d91e3e;   /* Grapas     — CMYK C:0  M:100 Y:90  K:0 */
}


/* ---- Semantic tokens (prefer these in components) ---------------------- */

:root {
  /* -- Text ------------------------------------------------------------- */
  --color-text-primary:        var(--color-brand-blue);     /* Body & headings */
  --color-text-strong:         var(--color-brand-blue-darkest); /* Max contrast */
  --color-text-muted:          var(--color-gray-500);       /* Secondary info */
  --color-text-inverse:        var(--color-white);          /* On dark backgrounds */
  --color-text-link:           var(--color-blue-accent);    /* Links */

  /* -- Surfaces --------------------------------------------------------- */
  --color-bg-page:             var(--color-white);          /* Default page bg */
  --color-bg-subtle:           var(--color-blue-50);        /* Subtle section fill */
  --color-bg-muted:            var(--color-gray-50);        /* Neutral panel fill */
  --color-bg-inverse:          var(--color-brand-blue);     /* Dark panels / footers */
  --color-bg-inverse-strong:   var(--color-brand-blue-darkest);

  /* -- Borders ---------------------------------------------------------- */
  --color-border-subtle:       var(--color-blue-100);       /* Default dividers */
  --color-border-default:      var(--color-blue-200);       /* Card borders */
  --color-border-strong:       var(--color-brand-blue);     /* Emphasis borders */
  --color-border-muted:        var(--color-gray-200);       /* Neutral dividers */

  /* -- Category accents (for product family context) -------------------- */
  --color-category-bodywork:   var(--color-accent-yellow);  /* Carrocería */
  --color-category-mechanical: var(--color-accent-green);   /* Mecánica */
  --color-category-clips:      var(--color-accent-red);     /* Grapas */

  /* -- Semantic states (reuse accents, context disambiguates) ----------- */
  --color-success:             var(--color-accent-green);
  --color-warning:             var(--color-accent-yellow);
  --color-danger:              var(--color-accent-red);

  /* -- Interactive ------------------------------------------------------ */
  --color-action-primary:         var(--color-brand-blue);
  --color-action-primary-hover:   var(--color-brand-blue-dark);
  --color-action-primary-active:  var(--color-brand-blue-darkest);
  --color-focus-ring:             var(--color-blue-accent);
}


/* ---- Layout tokens ----------------------------------------------------- */

:root {
  /* -- Spacing (4px base scale) ----------------------------------------- */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-6:   24px;
  --space-8:   32px;
  --space-12:  48px;
  --space-16:  64px;

  /* -- Border radius (minimal — brand is industrial, not playful) -------- */
  --radius-none: 0;
  --radius-sm:   2px;    /* buttons, inputs, badges */
  --radius-md:   4px;    /* cards, panels */
  --radius-lg:   6px;    /* modals, large containers */
  --radius-full: 9999px; /* avatars, pills only */

  /* -- Shadows (minimal — depth via borders and color, not drop-shadows) - */
  --shadow-sm:   0 1px 2px rgba(10, 40, 71, 0.06);
  --shadow-md:   0 2px 6px rgba(10, 40, 71, 0.08);
  --shadow-none: none;

  /* -- Transitions -------------------------------------------------------- */
  --transition-fast:   120ms ease-out;
  --transition-normal: 200ms ease-out;
  --transition-slow:   350ms ease-out;
}

/* ---- Breakpoints (documentation reference — not CSS variables) ----------
   sm:  640px
   md:  768px
   lg:  1024px
   xl:  1280px
   Use @media (min-width: 640px) etc. in component CSS.
   ------------------------------------------------------------------------- */


/* ---- Usage notes (non-rendering) ---------------------------------------

   TEXT CONTRAST
   - --color-text-primary (#0a2847) on --color-bg-page (#ffffff):
     ratio ≈ 14.3:1 — passes WCAG AAA for all text sizes.
   - --color-text-muted (#666666) on --color-bg-page (#ffffff):
     ratio ≈ 5.7:1 — passes AA for body text. Avoid for small text at <14px.
   - --color-text-inverse (#ffffff) on --color-bg-inverse (#0a2847):
     ratio ≈ 14.3:1 — passes AAA.

   CATEGORY vs SEMANTIC COLORS
   Yellow / green / red serve dual duty:
   1. Product category identification (Carrocería / Mecánica / Grapas)
   2. Semantic UI states (warning / success / danger)
   Context makes this unambiguous in practice — category colors appear as
   badges, tabs, and section accents; semantic colors appear in alerts,
   toasts, and inline validation. If a single screen needs both meanings,
   prefer using category colors only inside catalog/product UI and reserve
   the semantic aliases for system messages.

   DARK MODE
   Not defined. The Triclo brand is light-mode first. If dark mode is ever
   needed, reuse --color-brand-blue-darkest as page bg and flip the text/
   border scale — but do not ship dark mode without product sign-off.

   ------------------------------------------------------------------------- */