/* Tokens de Herbario. Valores finales del paquete de diseño: no se ajustan "a ojo".
   Los colores en oklch() son los del handoff; el hexadecimal de respaldo es la
   conversión a sRGB para navegadores que no soportan oklch(). */

:root {
  /* Papeles */
  --paper: #f3ecda;          /* base de la app */
  --paper-sheet: #f7f2e4;    /* hojas inferiores */
  --paper-card: #eae1c9;     /* tarjetas */
  --paper-cell: #ece3cd;     /* celdas de la rejilla semanal */
  --paper-nav: #eee5cf;      /* barra de pestañas */
  --paper-bar: #dfd4b7;      /* relleno de las barras de adherencia */
  --paper-thumb: #efe6cf;    /* fondo de miniatura */
  --paper-slot: #f2ebd9;     /* fondo de estampa dentro de una hoja */
  --desk: #d9cfb4;           /* mesa de trabajo, alrededor del lienzo */

  /* Tinta */
  --ink: #23201a;
  --ink-78: rgba(35, 32, 26, .78);
  --ink-75: rgba(35, 32, 26, .75);
  --ink-70: rgba(35, 32, 26, .70);
  --ink-65: rgba(35, 32, 26, .65);
  --ink-60: rgba(35, 32, 26, .60);
  --ink-55: rgba(35, 32, 26, .55);
  --ink-50: rgba(35, 32, 26, .50);
  --ink-40: rgba(35, 32, 26, .40);

  /* Filetes: la profundidad de la lámina sale de aquí, no de sombras */
  --rule-18: rgba(35, 32, 26, .18);
  --rule-20: rgba(35, 32, 26, .20);
  --rule-22: rgba(35, 32, 26, .22);
  --rule-25: rgba(35, 32, 26, .25);
  --rule-28: rgba(35, 32, 26, .28);
  --rule-30: rgba(35, 32, 26, .30);
  --rule-35: rgba(35, 32, 26, .35);
  --rule-40: rgba(35, 32, 26, .40);
  --rule-45: rgba(35, 32, 26, .45);

  /* Verde botánico */
  --green: #496e4a;
  --green-dark: #3c5a3d;
  --green-light: #8fb48f;

  /* Óxido */
  --rust: #a44c1d;
  --rust-dark: #8e3f16;

  /* Velos de papel sobre las ilustraciones de fondo */
  --veil-header: linear-gradient(180deg, rgba(243, 236, 218, .58), rgba(243, 236, 218, .9));
  --veil-body: rgba(243, 236, 218, .72);
  --veil-onboarding-a: linear-gradient(180deg, rgba(243, 236, 218, .72), rgba(243, 236, 218, .94));
  --veil-onboarding-b: linear-gradient(180deg, rgba(243, 236, 218, .5), rgba(243, 236, 218, .8));

  /* Textura de grano del papel */
  --grain: radial-gradient(var(--grain-dot) .5px, transparent .5px);
  --grain-dot: rgba(35, 32, 26, .06);
  --grain-size: 4px 4px;

  /* Tipografía */
  --serif: "EB Garamond", Georgia, "Times New Roman", serif;
  --mono: "IBM Plex Mono", "Courier New", monospace;

  --size-streak: 44px;      /* número de racha */
  --size-display: 34px;     /* título del onboarding */
  --size-screen: 29px;      /* título de pantalla */
  --size-sheet: 26px;       /* título de hoja inferior */
  --size-stepper: 22px;     /* valor del paso de porción */
  --size-option: 19px;      /* nombre de comida y de opción */
  --size-food: 17.5px;      /* nombre de alimento */
  --size-body: 17px;        /* párrafo */
  --size-toast: 16.5px;
  --size-chip: 15.5px;

  --mono-lg: 12px;
  --mono-md: 11px;
  --mono-detail: 10.5px;
  --mono-meta: 10px;
  --mono-sm: 9.5px;
  --mono-kicker: 9px;
  --mono-tag: 8.5px;

  --track-tight: .1em;
  --track-nav: .12em;
  --track-chip: .14em;
  --track-kicker: .16em;
  --track-label: .18em;
  --track-wide: .2em;
  --track-widest: .24em;

  /* Espaciado */
  --sp-2: 2px;  --sp-3: 3px;  --sp-4: 4px;   --sp-6: 6px;   --sp-7: 7px;
  --sp-9: 9px;  --sp-10: 10px; --sp-12: 12px; --sp-14: 14px; --sp-16: 16px;
  --sp-18: 18px; --sp-22: 22px; --sp-26: 26px;

  /* Radio 0 en todo: estética de placa grabada. Los círculos son la excepción. */
  --radius: 0;
}

/* Los navegadores que entienden oklch() usan los valores exactos del handoff */
@supports (color: oklch(0.5 0.07 145)) {
  :root {
    --green: oklch(0.5 0.07 145);
    --green-dark: oklch(0.42 0.07 145);
    --green-light: oklch(0.72 0.09 145);
    --rust: oklch(0.52 0.13 45);
    --rust-dark: oklch(0.45 0.13 45);
  }
}