/* dietetic.app — design tokens shared by every surface (panel, admin, portal,
   web, members app, print). Style v2 rollout, phase 0b: one :root instead of
   four copies; values unchanged. Linked before each surface's own CSS. */
:root {
    --da-primary: #1aa179;
    --da-primary-dark: #14805f;
    --da-primary-soft: #e8f7f1;
    --da-dark: #0f2c25;
    --da-muted: #5b6b67;
    --da-border: rgba(15, 44, 37, .08);

    /* Earth palette — complements the brand green without fighting
       success (strong green) or danger (red). Meant for in-between
       states (Pausado, Borrador, Compartido, …) and for badges
       where Bootstrap blue / Bootstrap yellow clash with the rest
       of the dashboard's visual language. */
    --da-clay:       #b66b4f;   /* terracotta, warm emphasis */
    --da-clay-soft:  #f6e6dd;
    --da-sand:       #8b6e2a;   /* ochre / muted mustard */
    --da-sand-soft:  #f1ead7;
    --da-stone:      #5a616a;   /* COOL neutral (formerly a warm taupe, #6f655c) */
    --da-stone-soft: #e9ebee;
    /* Steel blue — the cool secondary. Replaces the brown stone in
       neutral CTAs. Deliberately distinct from --da-ai (violet). */
    --da-blue:       #34688a;
    --da-blue-soft:  #e7eff5;
    /* Yellow accent — aligned with the public web. Used to
       "highlight ONE thing" on a page (a hero KPI, a
       highlight, a marketing alert-note). Not for clinical
       state, not for errors. */
    --da-accent:      #ffb547;
    --da-accent-soft: #fff5e0;

    /* AI — blue-violet. The colour of EVERYTHING that comes from
       the AI ("Analizar con IA" buttons, credit chips,
       assessments, "Analizado" badges, etc.). The icon that goes
       with it is always bi-stars, never another — together they
       are the AI feature's mark inside the product.
       Two stops of the gradient give the variants:
         --da-ai      : solid colour (indigo-violet)
         --da-ai-2    : lilac tone for the gradient
         --da-ai-soft : diffuse background for chips / soft buttons
         --da-ai-gradient : the canonical gradient (135°,
                            blue → indigo → lavender). */
    --da-ai:          #6c5ce7;
    --da-ai-2:        #a78bfa;
    --da-ai-soft:     #efebff;
    --da-ai-gradient: linear-gradient(135deg, #4e5cff 0%, #6c5ce7 55%, #a78bfa 100%);
}

/* ── Style v2 tokens (rollout phase 1a, docs/style-v2-rollout-plan.md) ──
   Added beside the ones above, which keep their values; the old names stay as
   they are and the new ones are what new CSS uses. */
:root {
    --da-primary-deep:  #0f5f47;   /* small text on the soft green */
    --da-primary-wash:  #f3faf7;

    /* Ink: four steps of text, one for decoration only. */
    --da-ink:    #0f2c25;          /* = --da-dark */
    --da-ink-2:  #34423e;
    --da-faint:  #6a7874;          /* meta, captions · 4,6:1 */
    --da-ghost:  #a9b4b0;          /* icons, placeholders, disabled; never text to read */

    /* Surfaces and lines. */
    --da-bg:          #f6f8f7;
    --da-surface:     #ffffff;
    --da-subtle:      #fafbfa;
    --da-well:        #f1f4f3;
    --da-line:        rgba(15, 44, 37, .08);   /* = --da-border */
    --da-line-strong: rgba(15, 44, 37, .14);

    /* The ink for text on each earth tone. */
    --da-clay-ink:  #8f4b33;
    --da-sand-ink:  #6e5520;
    --da-stone-ink: #474d55;
    --da-blue-ink:  #2b5674;

    /* Meaning: one colour each, from the palette. */
    --da-success: #14805f;  --da-success-soft: #e8f7f1;
    --da-info:    #34688a;  --da-info-soft:    #e7eff5;
    --da-warning: #8b6e2a;  --da-warning-soft: #f1ead7;
    --da-danger:  #b3402f;  --da-danger-soft:  #f8e5e1;  --da-danger-ink: #8a2e21;
    --da-ai-ink:  #5848d6;

    /* Data series, in this order. */
    --da-s1: #1aa179;  --da-s2: #4f86ad;  --da-s3: #c49a45;
    --da-s4: #c97d5f;  --da-s5: #8a929b;  --da-s6: #7f9442;
    /* Heat ramp (style v2): agenda load, mini calendar and year view alike. */
    --da-heat-1: color-mix(in srgb, var(--da-primary) 14%, #fff);
    --da-heat-2: color-mix(in srgb, var(--da-primary) 32%, #fff);
    --da-heat-3: color-mix(in srgb, var(--da-primary) 58%, #fff);
    --da-heat-4: var(--da-primary-dark);

    /* Macros: one colour each, on every screen. */
    --da-kcal:    var(--da-s1);
    --da-protein: #3f7fb4;
    --da-carbs:   var(--da-s3);
    --da-fat:     #a05a3f;
    --da-fiber:   var(--da-s6);

    /* Shape, space, type, motion. */
    --r-xs: 4px;  --r-sm: 8px;  --r-md: 10px;  --r-lg: 14px;  --r-xl: 20px;  --r-pill: 999px;
    --sh-1: 0 1px 2px rgba(15, 44, 37, .05);
    --sh-2: 0 8px 20px -8px rgba(15, 44, 37, .16);
    --sh-3: 0 16px 36px -12px rgba(15, 44, 37, .22), 0 2px 6px rgba(15, 44, 37, .05);
    --sh-4: 0 30px 70px -16px rgba(15, 44, 37, .32);
    --focus: 0 0 0 3px rgba(26, 161, 121, .28);
    --sp-1: .25rem; --sp-2: .5rem; --sp-3: .75rem; --sp-4: 1rem; --sp-5: 1.25rem;
    --sp-6: 1.5rem; --sp-8: 2rem; --sp-10: 2.5rem; --sp-12: 3rem;
    --fs-2xs: .68rem; --fs-xs: .75rem; --fs-sm: .82rem; --fs-md: .9rem; --fs-base: 1rem;
    --fs-lg: 1.125rem; --fs-xl: 1.375rem; --fs-2xl: 1.75rem; --fs-3xl: 2.25rem; --fs-4xl: 3rem;
    --ease: cubic-bezier(.2, .8, .2, 1);
    --t-fast: .12s;
    --t-base: .18s;

    /* Names views used that nobody declared (each fell back to its own guess,
       some off-brand: an olive #3a5e3a, three different inks). */
    --da-brand:          var(--da-primary);
    --da-brand-soft:     var(--da-primary-soft);
    --da-primary-d:      var(--da-primary-dark);
    --da-sand-emphasis:  var(--da-sand-ink);
    --da-clay-emphasis:  var(--da-clay-ink);
}

/* ── Bootstrap bridge (style v2 rollout, phase 1b) ──
   Bootstrap paints its own blue (#0d6efd) on what our CSS never styled:
   checked switches and checkboxes, focus rings, progress bars, the active
   item of lists, menus, pills and pagination. Its components read these
   variables or rules instead, on every surface. */
:root {
    --bs-primary: #1aa179;
    --bs-primary-rgb: 26, 161, 121;
    --bs-primary-text-emphasis: #0f5f47;
    --bs-primary-bg-subtle: #e8f7f1;
    --bs-primary-border-subtle: #a3dcc7;
    --bs-focus-ring-color: rgba(26, 161, 121, .28);
}
.form-control:focus,
.form-select:focus {
    border-color: color-mix(in srgb, var(--da-primary) 55%, #fff);
    box-shadow: var(--focus);
}
.form-check-input:focus {
    border-color: color-mix(in srgb, var(--da-primary) 55%, #fff);
    box-shadow: var(--focus);
}
.form-check-input:checked,
.form-check-input[type=checkbox]:indeterminate {
    background-color: var(--da-primary);
    border-color: var(--da-primary);
}
.form-switch .form-check-input:focus:not(:checked) {
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%238fd3ba'/%3e%3c/svg%3e");
}
.form-range::-webkit-slider-thumb { background-color: var(--da-primary); }
.form-range::-moz-range-thumb     { background-color: var(--da-primary); }
.form-range:focus::-webkit-slider-thumb { box-shadow: 0 0 0 1px #fff, var(--focus); }
.form-range:focus::-moz-range-thumb     { box-shadow: 0 0 0 1px #fff, var(--focus); }
.progress, .progress-stacked { --bs-progress-bar-bg: var(--da-primary); }
.list-group {
    --bs-list-group-active-bg: var(--da-primary);
    --bs-list-group-active-border-color: var(--da-primary);
}
.dropdown-menu { --bs-dropdown-link-active-bg: var(--da-primary); }
.nav-pills { --bs-nav-pills-link-active-bg: var(--da-primary); }
.pagination {
    --bs-pagination-active-bg: var(--da-primary);
    --bs-pagination-active-border-color: var(--da-primary);
    --bs-pagination-focus-box-shadow: var(--focus);
    --bs-pagination-color: var(--da-primary-dark);
    --bs-pagination-hover-color: var(--da-primary-deep);
}
.btn-close:focus { box-shadow: var(--focus); }
.accordion {
    --bs-accordion-btn-focus-box-shadow: var(--focus);
    --bs-accordion-active-color: var(--da-primary-deep);
    --bs-accordion-active-bg: var(--da-primary-wash);
}

/* ── The one traffic light (style v2, phase 3) ──
   Good · watch · risk, the only palette for «how is it going»:
   adherence, calibration dots, template fit, nutrient bands. */
:root {
    --da-good:  var(--da-primary);  --da-good-soft:  var(--da-primary-soft); --da-good-ink:  var(--da-primary-deep);
    --da-watch: var(--da-sand);     --da-watch-soft: var(--da-sand-soft);    --da-watch-ink: var(--da-sand-ink);
    --da-risk:  var(--da-danger);   --da-risk-soft:  var(--da-danger-soft);  --da-risk-ink:  var(--da-danger-ink);
}