/* ============================================================ AILA Design System — Giada Theme Semantic Colors · Light mode ------------------------------------------------------------ Semantic tokens are what product code consumes. They reference primitives from tokens/primitives.css — never hex values. Resolutions applied to the source spec: · --primary-opacity → --color-ciano-400-a12 (source said "--color-primary-400-a12", undefined) · --primary-text → --color-ciano-800 (source said "--color-800", missing family) · --secondary-action → --color-blue-500 (source had single-dash typo "-color-blue-500") · --secondary-opacity → --color-blue-400-a12 (source said "--color-secondary-400-a12", undefined) Nutrient groups water, alcol, processed, integration, attive: the source spec did not define a --*-text token for these, so none is emitted. Add later if needed. ============================================================ */ :root { /* ------------------------------------------------------------ Semantic · Neutral ------------------------------------------------------------ */ --heading: var(--color-neutral-900); --body: var(--color-neutral-900); --subtitle-1: var(--color-neutral-700); --subtitle-2: var(--color-neutral-600); --placeholder: var(--color-neutral-500); --invert: var(--color-white); --disabled-font: var(--color-neutral-200); --disabled-surface: var(--color-neutral-100); --border: var(--color-neutral-100); --background: var(--color-white); --neutral-action: var(--color-neutral-600); --neutral-action-hover: var(--color-neutral-800); --neutral-tonal: var(--color-neutral-50); --neutral-tonal-hover: var(--color-neutral-100); --neutral-bg: var(--color-neutral-50); --neutral-surface: var(--color-neutral-400); --neutral-surface-light:var(--color-neutral-300); --neutral-opacity: var(--color-neutral-400-a12); /* ------------------------------------------------------------ Semantic · Primary (Ciano) ------------------------------------------------------------ */ --primary-action: var(--color-ciano-500); --primary-action-hover: var(--color-ciano-700); --primary-tonal: var(--color-ciano-100); --primary-tonal-hover: var(--color-ciano-300); --primary-bg: var(--color-ciano-50); --primary-surface: var(--color-ciano-400); --primary-surface-light:var(--color-ciano-300); --primary-opacity: var(--color-ciano-400-a12); --primary-text: var(--color-ciano-800); /* ------------------------------------------------------------ Semantic · Secondary (Blue) ------------------------------------------------------------ */ --secondary-action: var(--color-blue-500); --secondary-action-hover: var(--color-blue-700); --secondary-tonal: var(--color-blue-100); --secondary-tonal-hover: var(--color-blue-200); --secondary-bg: var(--color-blue-50); --secondary-surface: var(--color-blue-400); --secondary-surface-light:var(--color-blue-300); --secondary-opacity: var(--color-blue-400-a12); --secondary-text: var(--color-blue-800); /* ------------------------------------------------------------ Semantic · Danger ------------------------------------------------------------ */ --danger-action: var(--color-danger-600); --danger-action-hover: var(--color-danger-700); --danger-tonal: var(--color-danger-100); --danger-tonal-hover: var(--color-danger-200); --danger-bg: var(--color-danger-50); --danger-surface: var(--color-danger-500); --danger-surface-light: var(--color-danger-400); --danger-opacity: var(--color-danger-400-a12); --danger-text: var(--color-danger-800); /* ------------------------------------------------------------ Semantic · Warning ------------------------------------------------------------ */ --warning-action: var(--color-warning-600); --warning-action-hover: var(--color-warning-700); --warning-tonal: var(--color-warning-100); --warning-tonal-hover: var(--color-warning-200); --warning-bg: var(--color-warning-50); --warning-surface: var(--color-warning-500); --warning-surface-light: var(--color-warning-400); --warning-opacity: var(--color-warning-400-a12); --warning-text: var(--color-warning-800); /* ------------------------------------------------------------ Semantic · Success ------------------------------------------------------------ */ --success-action: var(--color-success-600); --success-action-hover: var(--color-success-700); --success-tonal: var(--color-success-100); --success-tonal-hover: var(--color-success-200); --success-bg: var(--color-success-50); --success-surface: var(--color-success-500); --success-surface-light: var(--color-success-400); --success-opacity: var(--color-success-400-a12); --success-text: var(--color-success-800); /* ------------------------------------------------------------ Semantic · Nutrients Giada-specific palette for nutrition visualization. ------------------------------------------------------------ */ /* kcal */ --nutrient-kcal-surface: var(--color-ciano-400); --nutrient-kcal-plus: var(--color-ciano-500); --nutrient-kcal-surface-light: var(--color-ciano-200); --nutrient-kcal-opacity: var(--color-ciano-400-a12); --nutrient-kcal-text: var(--color-ciano-800); /* protein */ --nutrient-protein-surface: var(--color-salmon-300); --nutrient-protein-plus: var(--color-salmon-400); --nutrient-protein-surface-light: var(--color-salmon-200); --nutrient-protein-opacity: var(--color-salmon-400-a12); --nutrient-protein-text: var(--color-salmon-800, var(--color-salmon-600)); /* fiber */ --nutrient-fiber-surface: var(--color-success-400); --nutrient-fiber-plus: var(--color-success-500); --nutrient-fiber-surface-light: var(--color-success-200); --nutrient-fiber-opacity: var(--color-success-400-a12); --nutrient-fiber-text: var(--color-success-800); /* carbo */ --nutrient-carbo-surface: var(--color-warning-400); --nutrient-carbo-plus: var(--color-warning-500); --nutrient-carbo-surface-light: var(--color-warning-200); --nutrient-carbo-opacity: var(--color-warning-400-a12); --nutrient-carbo-text: var(--color-warning-800); /* fat */ --nutrient-fat-surface: var(--color-blue-300); --nutrient-fat-plus: var(--color-blue-400); --nutrient-fat-surface-light: var(--color-blue-200); --nutrient-fat-opacity: var(--color-blue-400-a12); --nutrient-fat-text: var(--color-blue-800); /* water */ --nutrient-water-surface: var(--color-water-400); --nutrient-water-plus: var(--color-water-500); --nutrient-water-surface-light: var(--color-water-200); --nutrient-water-opacity: var(--color-water-400-a12); /* alcol (wine) */ --nutrient-alcol-surface: var(--color-wine-400); --nutrient-alcol-plus: var(--color-wine-500); --nutrient-alcol-surface-light: var(--color-wine-200); --nutrient-alcol-opacity: var(--color-wine-400-a12); /* processed */ --nutrient-processed-surface: var(--color-fucsia-400); --nutrient-processed-plus: var(--color-fucsia-500); --nutrient-processed-surface-light: var(--color-fucsia-200); --nutrient-processed-opacity: var(--color-fucsia-400-a12); /* integration */ --nutrient-integration-surface: var(--color-brown-400); --nutrient-integration-plus: var(--color-brown-500); --nutrient-integration-surface-light: var(--color-brown-200); --nutrient-integration-opacity: var(--color-brown-400-a12); /* attive */ --nutrient-attive-surface: var(--color-orange-400); --nutrient-attive-plus: var(--color-orange-500); --nutrient-attive-surface-light: var(--color-orange-200); --nutrient-attive-opacity: var(--color-orange-400-a12); /* ------------------------------------------------------------ Short aliases for component usage Lets components reference e.g. --protein-surface instead of --nutrient-protein-surface. Shape: {token} → nutrient-{token}. food aliases to kcal (same hue). ------------------------------------------------------------ */ --protein-surface: var(--nutrient-protein-surface); --fiber-surface: var(--nutrient-fiber-surface); --carbo-surface: var(--nutrient-carbo-surface); --fat-surface: var(--nutrient-fat-surface); --processed-surface: var(--nutrient-processed-surface); --wine-surface: var(--nutrient-alcol-surface); --water-surface: var(--nutrient-water-surface); --kcal-surface: var(--nutrient-kcal-surface); --attive-surface: var(--nutrient-attive-surface); }