simpleshop_theme/assets/css/theme-layer2-attributes.css

/* ========================================
   LAYER 2: THEME TOKENS (Attribute-based)
   ======================================== */

/* Mood - Default (Neutral) */
.preview-frame {
  --t-surface-base: #ffffff;
  --t-surface-raised: #ffffff;
  --t-surface-sunken: #f5f5f5;
  --t-surface-overlay: rgba(255, 255, 255, 0.95);
  --t-text-primary: #171717;
  --t-text-secondary: #525252;
  --t-text-tertiary: #a3a3a3;
  --t-text-inverse: #ffffff;
  --t-border-default: #e5e5e5;
  --t-border-subtle: #f0f0f0;
}

.preview-frame[data-mood="warm"] {
  --t-surface-base: #fdf8f3;
  --t-surface-raised: #fffcf8;
  --t-surface-sunken: #f5ebe0;
  --t-text-primary: #1c1917;
  --t-text-secondary: #57534e;
  --t-text-tertiary: #a8a29e;
  --t-border-default: #e7e0d8;
  --t-border-subtle: #f0ebe4;
}

.preview-frame[data-mood="cool"] {
  --t-surface-base: #f4f7fb;
  --t-surface-raised: #f8fafc;
  --t-surface-sunken: #e8eff7;
  --t-text-primary: #0f172a;
  --t-text-secondary: #475569;
  --t-text-tertiary: #94a3b8;
  --t-border-default: #d4dce8;
  --t-border-subtle: #e8eff5;
}

.preview-frame[data-mood="dark"] {
  --t-surface-base: #0a0a0a;
  --t-surface-raised: #171717;
  --t-surface-sunken: #000000;
  --t-surface-overlay: rgba(23, 23, 23, 0.95);
  --t-text-primary: #fafafa;
  --t-text-secondary: #a3a3a3;
  --t-text-tertiary: #737373;
  --t-text-inverse: #171717;
  --t-border-default: #262626;
  --t-border-subtle: #1c1c1c;
  --p-shadow-strength: 0.25;
}

/* Typography - Default (Clean/Inter) */
.preview-frame {
  --t-font-heading: var(--p-font-inter);
  --t-font-body: var(--p-font-inter);
  --t-heading-weight: 600;
  --t-heading-tracking: -0.025em;
}

.preview-frame[data-typography="editorial"] {
  --t-font-heading: var(--p-font-fraunces);
  --t-font-body: var(--p-font-source);
  --t-heading-weight: 600;
  --t-heading-tracking: -0.02em;
}

.preview-frame[data-typography="modern"] {
  --t-font-heading: var(--p-font-space);
  --t-font-body: var(--p-font-space);
  --t-heading-weight: 500;
  --t-heading-tracking: -0.03em;
}

.preview-frame[data-typography="classic"] {
  --t-font-heading: var(--p-font-baskerville);
  --t-font-body: var(--p-font-source);
  --t-heading-weight: 400;
  --t-heading-tracking: 0;
}

.preview-frame[data-typography="friendly"] {
  --t-font-heading: var(--p-font-nunito);
  --t-font-body: var(--p-font-nunito);
  --t-heading-weight: 700;
  --t-heading-tracking: -0.01em;
}

.preview-frame[data-typography="minimal"] {
  --t-font-heading: var(--p-font-outfit);
  --t-font-body: var(--p-font-outfit);
  --t-heading-weight: 300;
  --t-heading-tracking: 0;
}

.preview-frame[data-typography="impulse"] {
  --t-font-heading: var(--p-font-avenir);
  --t-font-body: var(--p-font-avenir);
  --t-heading-weight: 300;
  --t-heading-tracking: 0.02em;
}

/* Shape - Default (Soft) */
.preview-frame {
  --t-radius-sm: var(--p-radius-sm);
  --t-radius-md: var(--p-radius-md);
  --t-radius-lg: var(--p-radius-lg);
  --t-radius-button: var(--p-radius-md);
  --t-radius-card: var(--p-radius-lg);
  --t-radius-input: var(--p-radius-md);
  --t-radius-image: var(--p-radius-md);
}

.preview-frame[data-shape="sharp"] {
  --t-radius-sm: 0;
  --t-radius-md: 0;
  --t-radius-lg: 0;
  --t-radius-button: 0;
  --t-radius-card: 0;
  --t-radius-input: 0;
  --t-radius-image: 0;
}

.preview-frame[data-shape="round"] {
  --t-radius-sm: var(--p-radius-md);
  --t-radius-md: var(--p-radius-lg);
  --t-radius-lg: var(--p-radius-xl);
  --t-radius-button: var(--p-radius-lg);
  --t-radius-card: var(--p-radius-xl);
  --t-radius-input: var(--p-radius-lg);
  --t-radius-image: var(--p-radius-lg);
}

.preview-frame[data-shape="pill"] {
  --t-radius-sm: var(--p-radius-full);
  --t-radius-md: var(--p-radius-full);
  --t-radius-lg: var(--p-radius-xl);
  --t-radius-button: var(--p-radius-full);
  --t-radius-card: var(--p-radius-xl);
  --t-radius-input: var(--p-radius-full);
  --t-radius-image: var(--p-radius-lg);
}

/* Density - Default (Balanced) */
.preview-frame {
  --t-density: 1;
}

.preview-frame[data-density="spacious"] {
  --t-density: 1.25;
}

.preview-frame[data-density="compact"] {
  --t-density: 0.85;
}