/* ============================================================
   StorageStack — Design Tokens
   v1.0 · 2026-05-22
   Source of truth for every visual decision. Consume directly.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ---------- 1. PALETTE — locked brand colors ---------- */

  /* Warm core */
  --ss-sunset:    #FF6B1A;
  --ss-sun:       #FF9F1C;
  --ss-honey:     #FFC233;

  /* Cool counterpoint */
  --ss-lavender:  #A89EE8;
  --ss-iris:      #6B5FCF;

  /* Neutrals */
  --ss-ink:       #1F1B2E;
  --ss-slate:     #5C5870;
  --ss-cream:     #FFF4E1;
  --ss-bone:      #F7F5F0;
  --ss-mist:      #EEEAE0;
  --ss-paper:     #FFFFFF;

  /* Product tints (locked) */
  --ss-tint-social:  var(--ss-iris);     /* SocialEngine */
  --ss-tint-lock:    var(--ss-sunset);   /* LockEngine */
  --ss-tint-lien:    #B07A00;            /* LienEngine — Honey deepened */

  /* ---------- 2. SEMANTIC COLOR TOKENS ---------- */

  /* Surfaces */
  --color-surface-page:     var(--ss-cream);
  --color-surface-app:      var(--ss-bone);
  --color-surface-section:  var(--ss-paper);
  --color-surface-card:     var(--ss-paper);
  --color-surface-raised:   var(--ss-paper);
  --color-surface-inverse:  var(--ss-ink);
  --color-surface-muted:    var(--ss-mist);

  /* Text */
  --color-text-primary:    var(--ss-ink);
  --color-text-secondary:  var(--ss-slate);
  --color-text-inverse:    var(--ss-cream);
  --color-text-link:       var(--ss-iris);
  --color-text-link-hover: #5446B8;
  --color-text-on-primary: #FFFFFF;

  /* Borders */
  --color-border-default:  var(--ss-mist);
  --color-border-strong:   #D7D2C4;
  --color-border-focus:    var(--ss-iris);

  /* Actions */
  --color-action-primary:        var(--ss-sunset);
  --color-action-primary-hover:  #E85A0E;
  --color-action-primary-active: #CC4F0A;
  --color-action-secondary:      var(--ss-ink);
  --color-action-ghost-hover:    rgba(31, 27, 46, 0.06);

  /* State (harmonized with warm palette) */
  --color-state-success:    #2E8757;
  --color-state-success-bg: #E3F2E9;
  --color-state-warning:    #B07A00;
  --color-state-warning-bg: #FFF1CC;
  --color-state-danger:     #C8362B;
  --color-state-danger-bg:  #FBE5E1;
  --color-state-info:       var(--ss-iris);
  --color-state-info-bg:    #ECE9FA;

  /* ---------- 3. TYPOGRAPHY ---------- */

  --font-sans: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', monospace;

  --font-weight-regular: 400;
  --font-weight-bold:    700;

  /* Modular scale (1.25 minor third), anchored at 16px body */
  --text-display:     56px;  --lh-display:     1.05; --ls-display:     -0.02em;
  --text-h1:          44px;  --lh-h1:          1.10; --ls-h1:          -0.02em;
  --text-h2:          32px;  --lh-h2:          1.15; --ls-h2:          -0.01em;
  --text-h3:          24px;  --lh-h3:          1.25; --ls-h3:          -0.005em;
  --text-body-lg:     18px;  --lh-body-lg:     1.55; --ls-body-lg:      0;
  --text-body:        16px;  --lh-body:        1.55; --ls-body:         0;
  --text-small:       14px;  --lh-small:       1.50; --ls-small:        0;
  --text-caption:     12px;  --lh-caption:     1.40; --ls-caption:      0.02em;
  --text-eyebrow:     12px;  --lh-eyebrow:     1.40; --ls-eyebrow:      0.10em;

  /* ---------- 4. SPACING (4px base) ---------- */
  --space-0:    0;
  --space-1:    4px;
  --space-2:    8px;
  --space-3:    12px;
  --space-4:    16px;
  --space-5:    24px;
  --space-6:    32px;
  --space-7:    48px;
  --space-8:    64px;
  --space-9:    96px;
  --space-10:   128px;

  /* Section rhythm — use these on landing page sections */
  --section-y-sm:  var(--space-7);
  --section-y-md:  var(--space-8);
  --section-y-lg:  var(--space-9);
  --section-y-xl:  var(--space-10);

  /* ---------- 5. LAYOUT ---------- */
  --container-max:   1200px;
  --container-pad:   24px;
  --grid-columns:    12;
  --grid-gutter:     24px;

  /* Breakpoints (referenced, used in @media via px) */
  --bp-sm: 640px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;

  /* ---------- 6. RADII — derived from the logo bar radius ----------
     The logo bar uses ~24% of its height for corner radius. The 16px
     control radius keeps UI and brand mark visually consistent. */
  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-2xl:  32px;
  --radius-pill: 999px;

  /* ---------- 7. BORDERS ---------- */
  --border-thin:    1px;
  --border-default: 1.5px;
  --border-thick:   2px;

  /* ---------- 8. ELEVATION — soft, restrained (2 levels) ---------- */
  --shadow-none:  none;
  --shadow-sm:    0 1px 2px rgba(31, 27, 46, 0.04),
                  0 2px 6px rgba(31, 27, 46, 0.05);
  --shadow-md:    0 4px 12px rgba(31, 27, 46, 0.06),
                  0 12px 32px rgba(31, 27, 46, 0.08);
  --shadow-focus: 0 0 0 3px rgba(107, 95, 207, 0.35);

  /* ---------- 9. MOTION ---------- */
  --duration-fast:   120ms;
  --duration-base:   200ms;
  --duration-slow:   320ms;
  --ease-standard:   cubic-bezier(0.2, 0.0, 0.0, 1.0);
  --ease-emphasized: cubic-bezier(0.2, 0.0, 0.0, 1.2);

  /* ---------- 10. Z-INDEX ---------- */
  --z-base:      1;
  --z-raised:    10;
  --z-dropdown:  100;
  --z-sticky:    200;
  --z-modal:     1000;
  --z-toast:     1500;
}

/* ============================================================
   Base reset + element defaults
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--lh-body);
  font-weight: var(--font-weight-regular);
  color: var(--color-text-primary);
  background: var(--color-surface-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-sans);
  font-weight: var(--font-weight-bold);
  margin: 0;
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }

a {
  color: var(--color-text-link);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
  transition: color var(--duration-fast) var(--ease-standard);
}
a:hover { color: var(--color-text-link-hover); }
a:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
  border-radius: var(--radius-xs);
}

::selection { background: var(--ss-honey); color: var(--ss-ink); }

/* ============================================================
   Type utilities
   ============================================================ */
.t-display  { font-size: var(--text-display); line-height: var(--lh-display); letter-spacing: var(--ls-display); font-weight: 700; }
.t-h1       { font-size: var(--text-h1); line-height: var(--lh-h1); letter-spacing: var(--ls-h1); font-weight: 700; }
.t-h2       { font-size: var(--text-h2); line-height: var(--lh-h2); letter-spacing: var(--ls-h2); font-weight: 700; }
.t-h3       { font-size: var(--text-h3); line-height: var(--lh-h3); letter-spacing: var(--ls-h3); font-weight: 700; }
.t-body-lg  { font-size: var(--text-body-lg); line-height: var(--lh-body-lg); }
.t-body     { font-size: var(--text-body); line-height: var(--lh-body); }
.t-small    { font-size: var(--text-small); line-height: var(--lh-small); }
.t-caption  { font-size: var(--text-caption); line-height: var(--lh-caption); letter-spacing: var(--ls-caption); }
.t-eyebrow  { font-size: var(--text-eyebrow); line-height: var(--lh-eyebrow); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; font-weight: 700; }
.t-secondary { color: var(--color-text-secondary); }
.t-mono     { font-family: var(--font-mono); }

/* ============================================================
   Buttons — primary, secondary, ghost · sm/md/lg
   ============================================================ */
.btn {
  --btn-py: 12px;
  --btn-px: 20px;
  --btn-fs: var(--text-body);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--btn-py) var(--btn-px);
  font-family: var(--font-sans);
  font-size: var(--btn-fs);
  font-weight: var(--font-weight-bold);
  line-height: 1;
  border-radius: var(--radius-pill);
  border: var(--border-default) solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--duration-fast) var(--ease-standard),
              color var(--duration-fast) var(--ease-standard),
              border-color var(--duration-fast) var(--ease-standard),
              transform var(--duration-fast) var(--ease-standard),
              box-shadow var(--duration-fast) var(--ease-standard);
  min-height: 44px;
  white-space: nowrap;
}
.btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.btn:active { transform: translateY(1px); }
.btn[disabled], .btn[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

.btn--sm { --btn-py: 8px; --btn-px: 14px; --btn-fs: var(--text-small); min-height: 36px; }
.btn--lg { --btn-py: 16px; --btn-px: 28px; --btn-fs: var(--text-body-lg); min-height: 52px; }

.btn--primary {
  background: var(--color-action-primary);
  color: var(--color-text-on-primary);
}
.btn--primary:hover { background: var(--color-action-primary-hover); }
.btn--primary:active { background: var(--color-action-primary-active); }

.btn--secondary {
  background: transparent;
  color: var(--color-text-primary);
  border-color: var(--ss-ink);
}
.btn--secondary:hover { background: var(--color-action-ghost-hover); }

.btn--ghost {
  background: transparent;
  color: var(--color-text-primary);
}
.btn--ghost:hover { background: var(--color-action-ghost-hover); }

/* Soft tinted buttons — for row actions where meaning needs to read at a glance.
   Bg = state-bg token, text = state token. Hover deepens the tint. */
.btn--primary-soft {
  background: #FFE2D0;
  color: var(--ss-sunset);
}
.btn--primary-soft:hover { background: #FFD0B5; }

.btn--info {
  background: var(--color-state-info-bg);
  color: var(--color-state-info);
}
.btn--info:hover { background: #DDD7F4; }

.btn--success {
  background: var(--color-state-success-bg);
  color: var(--color-state-success);
}
.btn--success:hover { background: #D0E8DA; }

.btn--danger {
  background: var(--color-state-danger-bg);
  color: var(--color-state-danger);
}
.btn--danger:hover { background: #F5D0CA; }

.btn--warning {
  background: var(--color-state-warning-bg);
  color: var(--color-state-warning);
}
.btn--warning:hover { background: #FFE6B0; }

/* ============================================================
   Form controls
   ============================================================ */
.field { display: flex; flex-direction: column; gap: var(--space-2); }
.field__label { font-size: var(--text-small); font-weight: 700; color: var(--color-text-primary); }
.field__help { font-size: var(--text-small); color: var(--color-text-secondary); }
.field__error { font-size: var(--text-small); color: var(--color-state-danger); }

.input, .textarea, .select {
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: 1.4;
  color: var(--color-text-primary);
  background: var(--color-surface-card);
  border: var(--border-default) solid var(--color-border-default);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  min-height: 44px;
  width: 100%;
  transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard);
}
.input:hover, .textarea:hover, .select:hover { border-color: var(--color-border-strong); }
.input:focus-visible, .textarea:focus-visible, .select:focus-visible {
  outline: none;
  border-color: var(--color-border-focus);
  box-shadow: var(--shadow-focus);
}
.input::placeholder, .textarea::placeholder { color: var(--color-text-secondary); opacity: 0.7; }
.textarea { min-height: 96px; resize: vertical; }
.field--error .input, .field--error .textarea, .field--error .select { border-color: var(--color-state-danger); }

/* Checkbox / radio */
.check { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; }
.check__box {
  width: 20px; height: 20px;
  border: var(--border-default) solid var(--color-border-strong);
  border-radius: 6px;
  background: var(--color-surface-card);
  display: inline-grid; place-items: center;
  transition: all var(--duration-fast) var(--ease-standard);
}
.check__box--radio { border-radius: 999px; }
.check input { position: absolute; opacity: 0; pointer-events: none; }
.check input:checked + .check__box {
  background: var(--ss-ink); border-color: var(--ss-ink);
}
.check input:checked + .check__box::after {
  content: ""; width: 10px; height: 10px;
  background: var(--ss-cream);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M2 8.5l3.5 3.5L14 4' stroke='black' stroke-width='2.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M2 8.5l3.5 3.5L14 4' stroke='black' stroke-width='2.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/contain no-repeat;
}
.check input:checked + .check__box--radio::after {
  width: 8px; height: 8px; border-radius: 999px;
  background: var(--ss-cream); -webkit-mask: none; mask: none;
}
.check input:focus-visible + .check__box { box-shadow: var(--shadow-focus); }

/* Toggle */
.toggle { position: relative; display: inline-flex; align-items: center; gap: 10px; cursor: pointer; }
.toggle input { position: absolute; opacity: 0; pointer-events: none; }
.toggle__track {
  width: 40px; height: 24px; border-radius: 999px;
  background: var(--color-border-strong);
  transition: background var(--duration-base) var(--ease-standard);
  position: relative;
}
.toggle__track::after {
  content: ""; position: absolute; top: 3px; left: 3px;
  width: 18px; height: 18px; border-radius: 999px;
  background: var(--ss-paper);
  transition: left var(--duration-base) var(--ease-emphasized);
}
.toggle input:checked + .toggle__track { background: var(--ss-sunset); }
.toggle input:checked + .toggle__track::after { left: 19px; }
.toggle input:focus-visible + .toggle__track { box-shadow: var(--shadow-focus); }

/* ============================================================
   Card
   ============================================================ */
.card {
  background: var(--color-surface-card);
  border: var(--border-thin) solid var(--color-border-default);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
}
.card--flat { box-shadow: none; }
.card--raised { box-shadow: var(--shadow-md); }

/* ============================================================
   Badge / pill
   ============================================================ */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  font-size: var(--text-caption);
  font-weight: 700;
  border-radius: var(--radius-pill);
  background: var(--ss-mist);
  color: var(--ss-ink);
  line-height: 1.4;
}
.badge--sunset { background: var(--ss-sunset); color: #fff; }
.badge--lavender { background: var(--ss-lavender); color: var(--ss-ink); }
.badge--success { background: var(--color-state-success-bg); color: var(--color-state-success); }
.badge--warning { background: var(--color-state-warning-bg); color: var(--color-state-warning); }
.badge--danger { background: var(--color-state-danger-bg); color: var(--color-state-danger); }
.badge--info { background: var(--color-state-info-bg); color: var(--color-state-info); }

/* ============================================================
   Alert
   ============================================================ */
.alert {
  display: flex; gap: var(--space-3); align-items: flex-start;
  padding: var(--space-4);
  border-radius: var(--radius-md);
  border: var(--border-thin) solid var(--color-border-default);
  background: var(--color-surface-section);
}
.alert--success { background: var(--color-state-success-bg); border-color: transparent; }
.alert--warning { background: var(--color-state-warning-bg); border-color: transparent; }
.alert--danger  { background: var(--color-state-danger-bg);  border-color: transparent; }
.alert--info    { background: var(--color-state-info-bg);    border-color: transparent; }

/* ============================================================
   Container + layout helpers
   ============================================================ */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding-left: var(--container-pad);
  padding-right: var(--container-pad);
}
.stack { display: flex; flex-direction: column; }
.row   { display: flex; flex-direction: row; }
.grid  { display: grid; }

/* ============================================================
   Focus ring (utility)
   ============================================================ */
.focus-ring:focus-visible { outline: none; box-shadow: var(--shadow-focus); }