/*
 * tokens.css — uCommerce Design Tokens
 *
 * All core visual decisions live here. Do not hard-code colors, type scales,
 * spacing, shadows, or motion values anywhere else in the codebase.
 *
 * Token groups required:
 *   - Colors
 *   - Typography
 *   - Spacing
 *   - Container widths
 *   - Border radius
 *   - Shadows
 *   - Z-index
 *   - Motion durations
 *   - Breakpoints (as custom media or JS-readable values)
 *
 * Status: Phase 3 — Editorial minimalism aesthetic with distinctive typography.
 * Replace these tokens with official brand values when guidelines are delivered.
 */

:root {

  /* -----------------------------------------------------------------------
   * Colors
   * Editorial minimalism palette with warm accent.
   * Replace with official brand values when confirmed.
   * ----------------------------------------------------------------------- */

  --color-brand-primary:     #1a1a1a;
  --color-brand-secondary:   #3d3d3d;
  --color-accent:            #d4693b;   /* Warm terracotta */
  --color-accent-hover:      #b85a33;

  --color-bg-page:           #fafaf8;   /* Off-white warmth */
  --color-bg-surface:        #ffffff;
  --color-bg-dark:           #1a1a1a;
  --color-bg-subtle:         #f0efe9;   /* Subtle warm tint */

  --color-text-primary:      #1a1a1a;
  --color-text-secondary:    #4a4a4a;
  --color-text-inverse:      #ffffff;
  --color-text-muted:        #6b6b6b;

  --color-border:            #d4d4d4;
  --color-border-focus:      #d4693b;

  --color-success:           #6b8e7f;   /* Muted sage green */
  --color-error:             #c75b4a;   /* Warm red */
  --color-warning:           #e07a3f;


  /* -----------------------------------------------------------------------
   * Typography
   * Editorial minimalism: Playfair Display (headings) + Work Sans (body).
   * Replace with official brand fonts when confirmed.
   * ----------------------------------------------------------------------- */

  --font-family-base:        "Work Sans", system-ui, -apple-system, BlinkMacSystemFont,
                             "Segoe UI", sans-serif;
  --font-family-heading:     "Playfair Display", Georgia, "Times New Roman", serif;
  --font-family-mono:        ui-monospace, "Cascadia Code", "Source Code Pro",
                             Menlo, Consolas, monospace;

  --font-size-xs:            0.75rem;    /* 12px */
  --font-size-sm:            0.875rem;   /* 14px */
  --font-size-base:          1rem;       /* 16px */
  --font-size-md:            1.125rem;   /* 18px */
  --font-size-lg:            1.375rem;   /* 22px - increased from 20px */
  --font-size-xl:            1.75rem;    /* 28px - increased from 24px */
  --font-size-2xl:           2.25rem;    /* 36px - increased from 30px */
  --font-size-3xl:           2.75rem;    /* 44px - increased from 36px */
  --font-size-4xl:           3.5rem;     /* 56px - increased from 48px */
  --font-size-5xl:           4.25rem;    /* 68px - increased from 60px */
  --font-size-6xl:           5rem;       /* 80px - increased from 72px */

  --font-weight-regular:     400;
  --font-weight-medium:      500;
  --font-weight-semibold:    600;
  --font-weight-bold:        700;

  --line-height-tight:       1.2;
  --line-height-snug:        1.35;
  --line-height-base:        1.7;
  --line-height-relaxed:     1.85;

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


  /* -----------------------------------------------------------------------
   * Spacing
   * Base unit: 4px (0.25rem)
   * ----------------------------------------------------------------------- */

  --space-1:    0.25rem;    /* 4px  */
  --space-2:    0.5rem;     /* 8px  */
  --space-3:    0.75rem;    /* 12px */
  --space-4:    1rem;       /* 16px */
  --space-5:    1.25rem;    /* 20px */
  --space-6:    1.5rem;     /* 24px */
  --space-8:    2rem;       /* 32px */
  --space-10:   2.5rem;     /* 40px */
  --space-12:   3rem;       /* 48px */
  --space-16:   4rem;       /* 64px */
  --space-20:   5rem;       /* 80px */
  --space-24:   6rem;       /* 96px */
  --space-32:   8rem;       /* 128px */

  /* Section padding */
  --section-padding-mobile:    var(--space-10);   /* 40px */
  --section-padding-tablet:    var(--space-16);   /* 64px */
  --section-padding-desktop:   var(--space-24);   /* 96px */


  /* -----------------------------------------------------------------------
   * Container widths
   * ----------------------------------------------------------------------- */

  --container-sm:    640px;
  --container-md:    768px;
  --container-lg:    1024px;
  --container-xl:    1280px;
  --container-2xl:   1440px;


  /* -----------------------------------------------------------------------
   * Border radius
   * ----------------------------------------------------------------------- */

  --radius-sm:      4px;
  --radius-md:      8px;
  --radius-lg:      12px;
  --radius-xl:      16px;
  --radius-full:    9999px;


  /* -----------------------------------------------------------------------
   * Shadows
   * ----------------------------------------------------------------------- */

  --shadow-sm:   0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-md:   0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg:   0 8px 24px rgba(0, 0, 0, 0.10);
  --shadow-xl:   0 16px 40px rgba(0, 0, 0, 0.12);


  /* -----------------------------------------------------------------------
   * Z-index
   * ----------------------------------------------------------------------- */

  --z-below:      -1;
  --z-base:        0;
  --z-raised:     10;
  --z-dropdown:   100;
  --z-sticky:     200;
  --z-overlay:    300;
  --z-modal:      400;
  --z-toast:      500;


  /* -----------------------------------------------------------------------
   * Motion
   * ----------------------------------------------------------------------- */

  --duration-fast:      150ms;
  --duration-base:      250ms;
  --duration-slow:      400ms;
  --duration-slower:    600ms;

  --easing-default:     cubic-bezier(0.4, 0.0, 0.2, 1);  /* Material Design */
  --easing-in:          cubic-bezier(0.4, 0.0, 1, 1);
  --easing-out:         cubic-bezier(0.0, 0.0, 0.2, 1);
  --easing-in-out:      cubic-bezier(0.4, 0.0, 0.2, 1);

}