/* ============================================================
   STUBBLE STUDIOS — Design System Tokens
   colors_and_type.css
   ============================================================ */

/* Outfit — headings, self-hosted variable font */
@font-face {
  font-family: 'Outfit';
  src: url('fonts/Outfit-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* Quicksand — body, self-hosted variable font */
@font-face {
  font-family: 'Quicksand';
  src: url('fonts/Quicksand-VariableFont_wght.ttf') format('truetype');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

:root {

  /* --------------------------------------------------------
     BRAND COLOR PALETTE
     Primary spectrum — vivid, high-saturation
  -------------------------------------------------------- */
  --ss-red:           #FF3448;   /* coral red — updated */
  --ss-pink:          #F200FF;   /* electric magenta — updated */
  --ss-orange:        #FF802A;   /* warm orange — updated */
  --ss-blue:          #2EA3F2;   /* sky blue — updated */
  --ss-purple:        #9B33D6;   /* vivid purple */
  --ss-violet:        #6642E8;   /* blue-violet / indigo */
  --ss-blue:          #3B8FEA;   /* electric blue */
  --ss-sky:           #3BC8EA;   /* sky / cyan */
  --ss-teal:          #20D4B8;   /* teal / mint */

  /* --------------------------------------------------------
     GRADIENT DEFINITIONS
     Signature noisy/mesh gradient pairs
  -------------------------------------------------------- */
  --ss-gradient-hero:         linear-gradient(135deg, #FF7426 0%, #F040B8 35%, #6642E8 65%, #3BC8EA 100%);
  --ss-gradient-warm:         linear-gradient(135deg, #FF3B5C 0%, #F040B8 50%, #9B33D6 100%);
  --ss-gradient-cool:         linear-gradient(135deg, #6642E8 0%, #3B8FEA 50%, #3BC8EA 100%);
  --ss-gradient-sunset:       linear-gradient(135deg, #FF7426 0%, #FF3B5C 50%, #9B33D6 100%);
  --ss-gradient-ocean:        linear-gradient(135deg, #20D4B8 0%, #3BC8EA 40%, #3B8FEA 70%, #6642E8 100%);
  --ss-gradient-multicolor:   linear-gradient(135deg, #FF7426 0%, #F040B8 25%, #9B33D6 50%, #3B8FEA 75%, #20D4B8 100%);
  --ss-gradient-logo:         linear-gradient(90deg, #FF7426 0%, #F040B8 40%, #3BC8EA 100%);

  /* --------------------------------------------------------
     SEMANTIC COLORS
  -------------------------------------------------------- */
  --ss-bg-white:      #FFFFFF;
  --ss-bg-light:      #F8F8FA;
  --ss-bg-dark:       #0D0D14;   /* near-black with blue tint */

  --ss-fg-primary:    #0D0D14;   /* headings on light bg */
  --ss-fg-secondary:  #3D3D55;   /* body on light bg */
  --ss-fg-muted:      #7A7A9A;   /* captions, meta */
  --ss-fg-oncolor:    #FFFFFF;   /* text on colored/dark bg */

  --ss-border:        rgba(0,0,0,0.08);
  --ss-border-color:  #E4E4EE;

  /* Interactive / semantic */
  --ss-action:        var(--ss-violet);
  --ss-action-hover:  #5535D8;
  --ss-success:       var(--ss-teal);
  --ss-warning:       var(--ss-orange);
  --ss-danger:        var(--ss-red);

  /* --------------------------------------------------------
     TYPOGRAPHY — BASE
  -------------------------------------------------------- */
  --font-heading:     'Outfit', sans-serif;
  --font-body:        'Quicksand', sans-serif;

  /* Weight scale */
  --fw-light:     300;
  --fw-regular:   400;
  --fw-medium:    500;
  --fw-semibold:  600;
  --fw-bold:      700;
  --fw-extrabold: 800;
  --fw-black:     900;

  /* Type scale (px) */
  --text-xs:    12px;
  --text-sm:    14px;
  --text-base:  16px;
  --text-md:    18px;
  --text-lg:    20px;
  --text-xl:    24px;
  --text-2xl:   32px;
  --text-3xl:   40px;
  --text-4xl:   52px;
  --text-5xl:   64px;
  --text-6xl:   80px;
  --text-7xl:   96px;

  /* Line heights */
  --lh-tight:   1.1;
  --lh-snug:    1.25;
  --lh-normal:  1.5;
  --lh-relaxed: 1.65;
  --lh-loose:   1.8;

  /* Letter spacing */
  --ls-tight:  -0.03em;
  --ls-snug:   -0.01em;
  --ls-normal:  0em;
  --ls-wide:    0.04em;
  --ls-wider:   0.08em;
  --ls-widest:  0.12em;

  /* --------------------------------------------------------
     SEMANTIC TYPE ROLES
  -------------------------------------------------------- */
  /* Display hero */
  --type-display-font:    var(--font-heading);
  --type-display-size:    var(--text-6xl);
  --type-display-weight:  var(--fw-bold);
  --type-display-lh:      var(--lh-tight);
  --type-display-ls:      var(--ls-tight);

  /* H1 */
  --type-h1-font:    var(--font-heading);
  --type-h1-size:    var(--text-5xl);
  --type-h1-weight:  var(--fw-bold);
  --type-h1-lh:      var(--lh-tight);
  --type-h1-ls:      var(--ls-tight);

  /* H2 */
  --type-h2-font:    var(--font-heading);
  --type-h2-size:    var(--text-4xl);
  --type-h2-weight:  var(--fw-semibold);
  --type-h2-lh:      var(--lh-snug);
  --type-h2-ls:      var(--ls-snug);

  /* H3 */
  --type-h3-font:    var(--font-heading);
  --type-h3-size:    var(--text-3xl);
  --type-h3-weight:  var(--fw-semibold);
  --type-h3-lh:      var(--lh-snug);

  /* H4 */
  --type-h4-font:    var(--font-heading);
  --type-h4-size:    var(--text-2xl);
  --type-h4-weight:  var(--fw-semibold);
  --type-h4-lh:      var(--lh-snug);

  /* Body large */
  --type-body-lg-font:    var(--font-body);
  --type-body-lg-size:    var(--text-md);
  --type-body-lg-weight:  var(--fw-medium);
  --type-body-lg-lh:      var(--lh-relaxed);

  /* Body base */
  --type-body-font:    var(--font-body);
  --type-body-size:    var(--text-base);
  --type-body-weight:  var(--fw-regular);
  --type-body-lh:      var(--lh-relaxed);

  /* Body small */
  --type-body-sm-font:    var(--font-body);
  --type-body-sm-size:    var(--text-sm);
  --type-body-sm-weight:  var(--fw-regular);
  --type-body-sm-lh:      var(--lh-normal);

  /* Caption / meta */
  --type-caption-font:    var(--font-body);
  --type-caption-size:    var(--text-xs);
  --type-caption-weight:  var(--fw-medium);
  --type-caption-ls:      var(--ls-wide);

  /* Label / UI */
  --type-label-font:    var(--font-heading);
  --type-label-size:    var(--text-sm);
  --type-label-weight:  var(--fw-semibold);
  --type-label-ls:      var(--ls-wide);

  /* --------------------------------------------------------
     SPACING SCALE
  -------------------------------------------------------- */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-16:  64px;
  --space-20:  80px;
  --space-24:  96px;
  --space-32:  128px;
  --space-40:  160px;

  /* --------------------------------------------------------
     BORDER RADIUS
  -------------------------------------------------------- */
  --radius-sm:   6px;
  --radius-md:   12px;
  --radius-lg:   20px;
  --radius-xl:   32px;
  --radius-2xl:  48px;
  --radius-pill: 9999px;

  /* --------------------------------------------------------
     SHADOWS / ELEVATION
  -------------------------------------------------------- */
  --shadow-sm:    0 2px 8px rgba(0,0,0,0.06);
  --shadow-md:    0 4px 20px rgba(0,0,0,0.10);
  --shadow-lg:    0 8px 40px rgba(0,0,0,0.14);
  --shadow-xl:    0 16px 60px rgba(0,0,0,0.18);
  --shadow-color: 0 8px 32px rgba(102, 66, 232, 0.30);  /* violet glow */
  --shadow-glow-orange: 0 8px 32px rgba(255,116,38,0.35);
  --shadow-glow-blue:   0 8px 32px rgba(59,143,234,0.35);
  --shadow-glow-teal:   0 8px 32px rgba(32,212,184,0.35);

  /* --------------------------------------------------------
     TRANSITIONS
  -------------------------------------------------------- */
  /* Dot grid texture — used as background on all white sections */
  --dot-grid-url: url('assets/dot-grid.webp');
  --dot-grid-size: 400px 400px;

  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in:    cubic-bezier(0.55, 0, 1, 0.45);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast:   150ms;
  --duration-base:   250ms;
  --duration-slow:   400ms;
  --duration-slower: 600ms;

}

/* ============================================================
   BASE ELEMENT STYLES (opt-in via class="ss-base")
   ============================================================ */
.ss-base {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--lh-relaxed);
  color: var(--ss-fg-primary);
  -webkit-font-smoothing: antialiased;
}
.ss-base h1 {
  font-family: var(--font-heading);
  font-size: var(--text-5xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--ss-fg-primary);
}
.ss-base h2 {
  font-family: var(--font-heading);
  font-size: var(--text-4xl);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-snug);
  color: var(--ss-fg-primary);
}
.ss-base h3 {
  font-family: var(--font-heading);
  font-size: var(--text-3xl);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  color: var(--ss-fg-primary);
}
.ss-base h4 {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-weight: var(--fw-semibold);
  color: var(--ss-fg-primary);
}
.ss-base p {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--lh-relaxed);
  color: var(--ss-fg-secondary);
}
.ss-base a {
  color: var(--ss-violet);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-out);
}
.ss-base a:hover { color: var(--ss-action-hover); }

/* ============================================================
   UTILITY CLASSES
   ============================================================ */

/* Text colors */
.text-orange  { color: var(--ss-orange); }
.text-red     { color: var(--ss-red); }
.text-pink    { color: var(--ss-pink); }
.text-purple  { color: var(--ss-purple); }
.text-violet  { color: var(--ss-violet); }
.text-blue    { color: var(--ss-blue); }
.text-sky     { color: var(--ss-sky); }
.text-teal    { color: var(--ss-teal); }
.text-white   { color: #fff; }
.text-muted   { color: var(--ss-fg-muted); }

/* Gradient text */
.text-gradient {
  background: var(--ss-gradient-hero);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.text-gradient-warm {
  background: var(--ss-gradient-warm);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Gradient backgrounds */
.bg-gradient-hero      { background: var(--ss-gradient-hero); }
.bg-gradient-warm      { background: var(--ss-gradient-warm); }
.bg-gradient-cool      { background: var(--ss-gradient-cool); }
.bg-gradient-sunset    { background: var(--ss-gradient-sunset); }
.bg-gradient-ocean     { background: var(--ss-gradient-ocean); }
.bg-gradient-multi     { background: var(--ss-gradient-multicolor); }

/* Buttons */
.btn-ss {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-size: var(--text-base);
  font-weight: var(--fw-semibold);
  padding: 14px 32px;
  border-radius: var(--radius-pill);
  border: none;
  cursor: pointer;
  transition: transform var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out),
              opacity var(--duration-fast);
  text-decoration: none;
}
.btn-ss:hover  { transform: translateY(-2px); }
.btn-ss:active { transform: translateY(0) scale(0.98); }

.btn-primary {
  background: var(--ss-violet);
  color: #fff;
  box-shadow: var(--shadow-color);
}
.btn-primary:hover { background: var(--ss-action-hover); box-shadow: 0 12px 40px rgba(102,66,232,0.45); }

.btn-gradient {
  background: var(--ss-gradient-hero);
  color: #fff;
  box-shadow: var(--shadow-color);
}

.btn-outline {
  background: transparent;
  color: #fff;
  border: 2px solid rgba(255,255,255,0.6);
}
.btn-outline:hover { background: rgba(255,255,255,0.1); }

.btn-light {
  background: rgba(255,255,255,0.15);
  color: #fff;
  backdrop-filter: blur(8px);
}