/* ==========================================================================
   OC Product Studio — Design Tokens
   Direction A · Warm Studio · Wordmark A2 · Space Grotesk
   ocproductstudio.com
   ========================================================================== */

/* ==========================================================================
   Color Tokens
   ========================================================================== */

:root {

  /* — Surfaces ------------------------------------------------------------ */
  --surface-base:     #F5F1E6;   /* Soft Linen — page background          */
  --surface-raised:   #FBF8F0;   /* Warm ivory — cards, panels        */
  --surface-subtle:   #EDE9DC;   /* Linen deeper — section dividers       */
  --surface-dark:     #3E2723;   /* Espresso — inverse backgrounds, hero  */
  --surface-dark-alt: #4C1413;   /* Rich Mahogany — dark variant          */

  /* — Text ---------------------------------------------------------------- */
  --text-primary:     #3E2723;   /* Espresso — headings, body             */
  --text-secondary:   #6B4038;   /* Espresso mid — subheadings, captions  */
  --text-tertiary:    #8D6150;   /* Espresso light — muted, placeholders  */
  --text-inverse:     #F5F1E6;   /* Linen — text on dark surfaces         */
  --text-inverse-dim: rgba(245, 241, 230, 0.65);

  /* - Brand Accent: Terracotta -------------------------------------------- */
  --accent:           #C75D3C;   /* Terracotta - primary brand accent       */
  --accent-light:     #E2A07D;   /* Soft clay - hover tint                  */
  --accent-pale:      #F6E7DE;   /* Terracotta pale - subtle accent fill    */
  --accent-dark:      #A14525;   /* Burnt terracotta - active states        */

  /* — Secondary Accent: Morning Butter ------------------------------------ */
  --secondary:        #F3D98F;   /* Morning Butter — highlight, badge     */
  --secondary-light:  #FAF0C8;   /* Butter pale — background tint         */
  --secondary-dark:   #D4AA7D;   /* Sandy Clay — emphasis                 */

  /* — Borders ------------------------------------------------------------- */
  --border:           rgba(62, 39, 35, 0.10);    /* Espresso 10% — default  */
  --border-strong:    rgba(62, 39, 35, 0.22);    /* Espresso 22% — emphasis */
  --border-accent:    rgba(199, 93, 60, 0.35);   /* Terracotta 35%          */
  --border-inverse:   rgba(245, 241, 230, 0.18); /* Linen 18% — on dark     */

  /* — Semantic (form validation only) ------------------------------------- */
  --color-error:   #D93025;
  --color-success: #1A6B3A;

}


/* ==========================================================================
   Typography
   ========================================================================== */

:root {

  /* — Font Families ------------------------------------------------------- */
  --font-sans: 'Space Grotesk', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono: ui-monospace, 'JetBrains Mono', 'Fira Code', monospace;

  /* — Fluid Type Scale ---------------------------------------------------- *
     Each step: clamp(min, preferred, max)
     Preferred uses vw + rem so it scales with both viewport and user prefs.
  * ----------------------------------------------------------------------- */
  /* Accessible floors: body >= 16px, all readable sub-body >= 14px.
     Only --text-2xs (decorative uppercase tags) sits below 14. */
  --text-2xs:  clamp(0.75rem,   0.72rem   + 0.15vw,  0.8125rem); /* 12 to 13px, decorative tags */
  --text-xs:   clamp(0.875rem,  0.855rem  + 0.1vw,   0.9375rem); /* 14 to 15px, small labels */
  --text-sm:   clamp(0.875rem,  0.84rem   + 0.2vw,   0.9375rem); /* 14 to 15px, sub-body */
  --text-base: clamp(1rem,      0.96rem   + 0.25vw,  1.0625rem); /* 16 to 17px, body */
  --text-md:   clamp(1.0625rem, 1rem      + 0.4vw,   1.25rem);   /* 17 to 20px */
  --text-lg:   clamp(1.25rem,   1.125rem  + 0.65vw,  1.5625rem); /*  20–25px */
  --text-xl:   clamp(1.5rem,    1.25rem   + 1.25vw,  2.125rem);  /*  24–34px */
  --text-2xl:  clamp(2rem,      1.5rem    + 2.5vw,   3.25rem);   /*  32–52px */
  --text-3xl:  clamp(2.5rem,    1.75rem   + 3.75vw,  4.5rem);    /*  40–72px */
  --text-hero: clamp(2.5rem,    1.7rem    + 3vw,     3.75rem);   /* 40 to 60px (homepage hero, left column) */

  /* — Font Weights -------------------------------------------------------- */
  --weight-light:    300;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* — Letter Spacing ------------------------------------------------------ */
  --tracking-tight:   -0.025em;
  --tracking-snug:    -0.01em;
  --tracking-normal:   0em;
  --tracking-wide:     0.04em;
  --tracking-wider:    0.1em;
  --tracking-widest:   0.2em;
  --tracking-label:    0.12em;   /* uppercase nav links, captions, labels  */

  /* — Line Heights -------------------------------------------------------- */
  --leading-none:    1;
  --leading-tight:   1.1;
  --leading-snug:    1.3;
  --leading-normal:  1.6;
  --leading-relaxed: 1.75;

}


/* ==========================================================================
   Wordmark — Direction A2 (Space Grotesk, weight contrast)
   Usage:
     <a class="wordmark" href="/">
       <span class="wordmark__mark">OC</span>
       <span class="wordmark__desc">Product Studio</span>
     </a>
   ========================================================================== */

:root {
  --wm-font:          var(--font-sans);
  --wm-mark-size:     clamp(1.25rem, 1rem + 1.3vw, 1.75rem);
  --wm-mark-weight:   var(--weight-bold);         /* 700                    */
  --wm-mark-tracking: 0.04em;
  --wm-desc-size:     clamp(0.6rem, 0.55rem + 0.3vw, 0.72rem);
  --wm-desc-weight:   var(--weight-light);         /* 300                   */
  --wm-desc-tracking: 0.22em;
  --wm-gap:           0.5rem;
  --wm-color:         var(--text-primary);
  --wm-color-inverse: var(--text-inverse);
  --wm-color-accent:  var(--accent);               /* blush OC — social/hero */
}


/* ==========================================================================
   Spacing
   ========================================================================== */

:root {

  --space-px:   1px;
  --space-0-5:  0.125rem;   /*   2px */
  --space-1:    0.25rem;    /*   4px */
  --space-1-5:  0.375rem;   /*   6px */
  --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 */

  /* — Fluid Section Rhythm ------------------------------------------------ */
  --section-y:    clamp(4rem,   2.5rem + 7.5vw, 10rem);
  --section-y-sm: clamp(2.5rem, 1.5rem + 5vw,   6rem);
  --container-x:  clamp(1.25rem, 3vw + 0.5rem,  3rem);

}


/* ==========================================================================
   Layout
   ========================================================================== */

:root {

  /* — Container Widths ---------------------------------------------------- */
  --container-max:   1340px;
  --container-wide:  1080px;
  --container-prose: 680px;

  /* — Border Radius ------------------------------------------------------- */
  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   14px;
  --radius-xl:   24px;
  --radius-2xl:  40px;
  --radius-full: 9999px;

  /* — Z-Index ------------------------------------------------------------- */
  --z-below:   -1;
  --z-base:     0;
  --z-raised:  10;
  --z-sticky:  50;
  --z-nav:    100;
  --z-modal:  200;
  --z-toast:  300;

  /* — Grid ---------------------------------------------------------------- */
  --grid-cols:   12;
  --grid-gutter: clamp(1rem, 2.5vw, 2rem);

}


/* ==========================================================================
   Animation
   ========================================================================== */

:root {

  /* — Durations ----------------------------------------------------------- */
  --dur-instant:  100ms;
  --dur-fast:     200ms;
  --dur-base:     300ms;
  --dur-slow:     500ms;
  --dur-slower:   700ms;
  --dur-slowest: 1000ms;

  /* — Easing -------------------------------------------------------------- */
  --ease-out:    cubic-bezier(0.0,  0,    0.2,  1);
  --ease-in:     cubic-bezier(0.4,  0,    1,    1);
  --ease-in-out: cubic-bezier(0.4,  0,    0.2,  1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);  /* slight overshoot   */

  /* — Scroll-Driven / View Transition defaults ---------------------------- */
  --scroll-ease:     var(--ease-out);
  --scroll-duration: var(--dur-slow);
  --vt-duration:     var(--dur-base);

}

/* Kill all durations for users who prefer reduced motion.
   Restore only intent-driven motion inside @supports (animation-timeline) */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-instant:  0ms;
    --dur-fast:     0ms;
    --dur-base:     0ms;
    --dur-slow:     0ms;
    --dur-slower:   0ms;
    --dur-slowest:  0ms;
  }
}


/* ==========================================================================
   Component Tokens
   ========================================================================== */

:root {

  /* — Focus Ring ---------------------------------------------------------- */
  --focus-color:  var(--accent);
  --focus-width:  2px;
  --focus-offset: 3px;
  --focus-ring:   var(--focus-width) solid var(--focus-color);

  /* — Navigation ---------------------------------------------------------- */
  --nav-height:        clamp(3.5rem, 3rem + 2.5vw, 5rem);
  --nav-bg:            var(--surface-base);
  --nav-bg-scroll:     rgba(245, 241, 230, 0.88);  /* frosted on scroll     */
  --nav-border:        var(--border);
  --nav-link-color:    var(--text-secondary);
  --nav-link-hover:    var(--text-primary);
  --nav-link-active:   var(--accent);
  --nav-link-size:     var(--text-sm);
  --nav-link-tracking: var(--tracking-wide);

  /* — Button: Primary ----------------------------------------------------- */
  --btn-bg:            var(--text-primary);
  --btn-color:         var(--surface-base);
  --btn-hover-bg:      var(--accent);
  --btn-hover-color:   #fff;
  --btn-radius:        var(--radius-full);
  --btn-px:            1.75rem;        /* 28px, was 24px: a touch more room */
  --btn-py:            0.875rem;       /* 14px, was 12px */
  --btn-size:          var(--text-sm);
  --btn-weight:        var(--weight-medium);
  --btn-tracking:      var(--tracking-wide);

  /* — Button: Ghost ------------------------------------------------------- */
  --btn-ghost-color:       var(--text-primary);
  --btn-ghost-border:      var(--border-strong);
  --btn-ghost-hover-bg:    var(--text-primary);
  --btn-ghost-hover-color: var(--surface-base);

  /* — Form Fields --------------------------------------------------------- */
  --input-bg:          var(--surface-raised);
  --input-border:      var(--border-strong);
  --input-focus:       var(--accent);
  --input-radius:      var(--radius-md);
  --input-px:          var(--space-4);
  --input-py:          var(--space-3);
  --input-size:        var(--text-base);
  --input-color:       var(--text-primary);
  --input-placeholder: var(--text-tertiary);
  --input-label-size:  var(--text-xs);
  --input-label-track: var(--tracking-label);

  /* — Cards --------------------------------------------------------------- */
  --card-bg:      var(--surface-raised);
  --card-border:  var(--border);
  --card-radius:  var(--radius-lg);
  --card-padding: var(--space-6);

  /* — Badge / Tag --------------------------------------------------------- */
  --badge-bg:       var(--secondary-light);
  --badge-color:    var(--secondary-dark);
  --badge-radius:   var(--radius-full);
  --badge-px:       var(--space-3);
  --badge-py:       var(--space-1);
  --badge-size:     var(--text-2xs);
  --badge-tracking: var(--tracking-wider);
  --badge-weight:   var(--weight-medium);

  /* — 360 Viewer ---------------------------------------------------------- */
  --viewer-bg:       var(--surface-subtle);
  --viewer-radius:   var(--radius-lg);
  --viewer-cursor:   grab;
  --viewer-frames:   36;            /* default frame count — override per product */

}