/* ============================================================
   PANINI & AFFINI — DESIGN TOKENS
   La Spezia · Est. 1974
   Generated from Brand Book Analysis
   ============================================================ */

:root {

  /* ----------------------------------------------------------
     COLORS
  ---------------------------------------------------------- */

  /* Primary */
  --color-red:          #CC092F;   /* Brand Red — Pantone 200C */
  --color-white:        #FFFFFF;

  /* Secondary / Structural */
  --color-charcoal:     #2A1E1A;   /* Shadow/3D extrusion on wall type */
  --color-off-white:    #F4EFE5;   /* Natural linen / canvas ground */
  --color-warm-grey:    #C8C2BA;   /* Background tone — neutral mid */
  --color-light-linen:  #EDE8DE;   /* Light parchment background */

  /* Accent (derived from brand material — tile grout, wood) */
  --color-wood:         #8B6A4E;   /* Warm walnut/teak furniture tone */
  --color-tile-white:   #F9F7F4;   /* Ceramic / marble tile white */

  /* Semantic aliases */
  --color-brand-primary:    var(--color-red);
  --color-brand-secondary:  var(--color-white);
  --color-brand-dark:       var(--color-charcoal);
  --color-background:       var(--color-white);
  --color-surface:          var(--color-off-white);
  --color-text-primary:     var(--color-charcoal);
  --color-text-inverse:     var(--color-white);
  --color-text-accent:      var(--color-red);

  /* ----------------------------------------------------------
     TYPOGRAPHY
  ---------------------------------------------------------- */

  /* Font families */
  --font-display:   'Oswald', 'Anton', Impact, sans-serif;
  --font-body:      'Barlow', 'Helvetica Neue', Arial, sans-serif;

  /* Font weights */
  --weight-black:      900;
  --weight-extrabold:  800;
  --weight-bold:       700;
  --weight-semibold:   600;
  --weight-regular:    400;

  /* Font sizes — typographic scale (1.333 perfect fourth) */
  --size-3xs:   0.512rem;   /*  ~8px  */
  --size-2xs:   0.64rem;    /* ~10px  */
  --size-xs:    0.75rem;    /* ~12px  */
  --size-sm:    0.875rem;   /* ~14px  */
  --size-base:  1rem;       /* ~16px  */
  --size-md:    1.125rem;   /* ~18px  */
  --size-lg:    1.333rem;   /* ~21px  */
  --size-xl:    1.777rem;   /* ~28px  */
  --size-2xl:   2.369rem;   /* ~38px  */
  --size-3xl:   3.157rem;   /* ~50px  */
  --size-4xl:   4.209rem;   /* ~67px  */
  --size-5xl:   5.61rem;    /* ~90px  */
  --size-6xl:   7.478rem;   /* ~120px */
  --size-display: 12rem;    /* Wall-scale wordmark */

  /* Line heights */
  --leading-none:    0.9;
  --leading-tight:   1.05;
  --leading-snug:    1.2;
  --leading-normal:  1.45;
  --leading-relaxed: 1.65;

  /* Letter spacing */
  --tracking-tight:   -0.02em;
  --tracking-normal:   0em;
  --tracking-wide:     0.08em;
  --tracking-wider:    0.15em;
  --tracking-widest:   0.25em;

  /* ----------------------------------------------------------
     SPACING — based on 8px base unit
  ---------------------------------------------------------- */

  --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 */
  --space-40:   10rem;     /* 160px */
  --space-48:   12rem;     /* 192px */

  /* ----------------------------------------------------------
     LAYOUT
  ---------------------------------------------------------- */

  --container-max:      1280px;
  --container-narrow:   720px;

  /* Margins — generous whitespace philosophy */
  --margin-page-sm:     var(--space-6);   /* 24px mobile */
  --margin-page-md:     var(--space-12);  /* 48px tablet */
  --margin-page-lg:     var(--space-20);  /* 80px desktop */
  --margin-page-xl:     var(--space-32);  /* 128px large */

  /* ----------------------------------------------------------
     PATTERN — Textile / Linen Grid System
  ---------------------------------------------------------- */

  /* Grid line weights (from linen inspiration) */
  --line-hair:    0.5px;
  --line-thin:    1px;
  --line-base:    2px;
  --line-medium:  4px;
  --line-thick:   8px;
  --line-heavy:  16px;

  /* Grid cell sizes */
  --grid-cell-sm:   24px;
  --grid-cell-md:   40px;
  --grid-cell-lg:   64px;

  /* Stripe gap rhythm */
  --stripe-gap-sm:   4px;
  --stripe-gap-md:   8px;
  --stripe-gap-lg:  16px;

  /* ----------------------------------------------------------
     BORDERS & RADIUS
  ---------------------------------------------------------- */

  --radius-none:    0;
  --radius-sm:      2px;
  --radius-base:    4px;

  /* Brand philosophy: sharp, architectural — minimal radius */
  --border-brand:   var(--line-medium) solid var(--color-red);

  /* ----------------------------------------------------------
     SHADOWS
  ---------------------------------------------------------- */

  /* Inspired by 3D extruded wall type */
  --shadow-extrude-sm:   3px 3px 0 var(--color-charcoal);
  --shadow-extrude-md:   6px 6px 0 var(--color-charcoal);
  --shadow-extrude-lg:   12px 12px 0 var(--color-charcoal);
  --shadow-extrude-red:  6px 6px 0 var(--color-red);

  /* ----------------------------------------------------------
     MOTION
  ---------------------------------------------------------- */

  --duration-fast:    120ms;
  --duration-base:    200ms;
  --duration-slow:    400ms;
  --ease-standard:    cubic-bezier(0.4, 0, 0.2, 1);

  /* ----------------------------------------------------------
     Z-INDEX
  ---------------------------------------------------------- */

  --z-base:    0;
  --z-raised:  10;
  --z-overlay: 100;
  --z-modal:   200;
  --z-top:     300;

}