simpleshop_theme/assets/css/theme-semantic.css

/* ========================================
   THEME SEMANTIC - Layer 3
   Semantic aliases for easy usage
   ======================================== */

.preview-frame, .shop-root {
  /* Accent color - HSL components set dynamically by CSS generator */
  --t-accent-h: 24;
  --t-accent-s: 95%;
  --t-accent-l: 53%;

  --t-accent: hsl(var(--t-accent-h) var(--t-accent-s) var(--t-accent-l));
  --t-accent-hover: hsl(var(--t-accent-h) var(--t-accent-s) calc(var(--t-accent-l) - 8%));
  --t-accent-subtle: hsl(var(--t-accent-h) 40% 95%);
  --t-accent-ring: hsl(var(--t-accent-h) var(--t-accent-s) var(--t-accent-l) / 0.4);

  /* Secondary colors */
  --t-secondary-accent: #ea580c;
  --t-sale-color: #dc2626;

  /* Font size scale - all sizes use em so they scale with --t-font-size-scale */
  --t-font-size-scale: 1;
  --t-heading-weight: 600;

  /*
   * Type Scale - Limited to 6 body sizes for design consistency
   * These use em units so they scale with the base font size setting
   * Body: caption, small, base, large
   * Display: xl, 2xl (for headings and hero text)
   */
  --t-text-caption: 0.75em;   /* ~12px at 16px base, ~14px at 18px base */
  --t-text-small: 0.875em;    /* ~14px at 16px base, ~16px at 18px base */
  --t-text-base: 1em;         /* matches base font size setting */
  --t-text-large: 1.125em;    /* ~18px at 16px base, ~20px at 18px base */
  --t-text-xl: 1.25em;        /* ~20px at 16px base, ~22px at 18px base */
  --t-text-2xl: 1.5em;        /* ~24px at 16px base, ~27px at 18px base */

  /* Heading sizes - separate scale for headings */
  --t-heading-sm: 1.25em;     /* h4, h5, h6 */
  --t-heading-md: 1.5em;      /* h3 */
  --t-heading-lg: 2em;        /* h2 */
  --t-heading-xl: 2.5em;      /* h1 */
  --t-heading-display: 3em;   /* hero/display text */

  /* Layout */
  --t-layout-max-width: 1400px;
  --t-button-style: filled;
  --t-card-shadow: none;
  --t-product-text-align: left;

  /* Page colors */
  --color-page: var(--t-surface-base);
  --color-card: var(--t-surface-raised);
  --color-input: var(--t-surface-raised);

  /* Text colors */
  --color-heading: var(--t-text-primary);
  --color-body: var(--t-text-secondary);
  --color-caption: var(--t-text-tertiary);

  /* Button colors */
  --color-button-primary: var(--t-accent);
  --color-button-primary-hover: var(--t-secondary-accent);
  --color-button-primary-text: var(--t-text-inverse);

  /* Border colors */
  --color-border: var(--t-border-default);

  /* Typography */
  --font-heading: var(--t-font-heading);
  --font-body: var(--t-font-body);
  --weight-heading: var(--t-heading-weight);
  --tracking-heading: var(--t-heading-tracking);

  /* Density-aware spacing */
  --space-xs: calc(var(--p-space-2) * var(--t-density));
  --space-sm: calc(var(--p-space-3) * var(--t-density));
  --space-md: calc(var(--p-space-4) * var(--t-density));
  --space-lg: calc(var(--p-space-6) * var(--t-density));
  --space-xl: calc(var(--p-space-8) * var(--t-density));
  --space-2xl: calc(var(--p-space-12) * var(--t-density));

  /* Border radius */
  --radius-button: var(--t-radius-button);
  --radius-card: var(--t-radius-card);
  --radius-input: var(--t-radius-input);
  --radius-image: var(--t-radius-image);

  /* Shadows */
  --shadow-sm:
    0 1px 2px hsl(var(--p-shadow-color) / calc(var(--p-shadow-strength) * 0.5)),
    0 1px 3px hsl(var(--p-shadow-color) / var(--p-shadow-strength));
  --shadow-md:
    0 2px 4px hsl(var(--p-shadow-color) / calc(var(--p-shadow-strength) * 0.5)),
    0 4px 8px hsl(var(--p-shadow-color) / var(--p-shadow-strength)),
    0 8px 16px hsl(var(--p-shadow-color) / calc(var(--p-shadow-strength) * 0.5));

  /* Transitions */
  --transition-fast: var(--p-duration-fast) var(--p-ease-out);
  --transition-normal: var(--p-duration-normal) var(--p-ease-out);
  --transition-bounce: var(--p-duration-normal) var(--p-ease-out-back);
}

/* Dark mode accent-subtle override */
.preview-frame[data-mood="dark"], .shop-root[data-mood="dark"] {
  --t-accent-subtle: hsl(var(--t-accent-h) 30% 15%);
}