/*
 * 00-TOKENS.CSS
 * The only file where real colours, fonts and sizes are written. Every other stylesheet reads these names.
 * Pattern for every name: --jm-{group}-{name}   e.g. --jm-colour-accent-1, --jm-space-3, --jm-radius-button
 */

:root {

	/* ============================================================
	 * 1. MAIN COLOUR PALETTE (8 swatches)
	 * The site's own colours, like the old Blocksy palette.
	 * Change a swatch here and everything using it changes.
	 * PLACEHOLDER values read from a screenshot; exact values to paste in later.
	 * ============================================================ */

	--jm-colour-accent-1: #E8B27A;  /* main accent: sand */
	--jm-colour-accent-2: #D9A441;  /* main accent alt: gold (PLACEHOLDER, to choose) */
	--jm-colour-accent-3: #45B5C0;  /* second accent: teal */
	--jm-colour-accent-4: #4E7A7C;  /* second accent alt: dark teal */
	--jm-colour-light-1:  #F6F4F4;  /* off-white (exact, from the old palette.php) */
	--jm-colour-light-2:  #D3CBC8;  /* warm grey */
	--jm-colour-dark-1:   #394142;  /* charcoal (exact, from the old palette.php) */
	--jm-colour-dark-2:   #7E8C8E;  /* slate grey */


	/* ============================================================
	 * 2. SECONDARY COLOUR PALETTE: THE SCALE (8 swatches)
	 * A 0 to 7 run of colours. Used by the rating slider and labels for now;
	 * graphs can reuse it later. Values 1 to 7 are exact, from the old ratings code.
	 * ============================================================ */

	--jm-colour-scale-0: #9AA5A6;  /* neutral (PLACEHOLDER, to choose) */
	--jm-colour-scale-1: #EA4861;
	--jm-colour-scale-2: #F291A0;
	--jm-colour-scale-3: #D291F2;
	--jm-colour-scale-4: #A3DBE1;
	--jm-colour-scale-5: #46B7C3;
	--jm-colour-scale-6: #99F7AB;
	--jm-colour-scale-7: #F0A202;


	/* ============================================================
	 * 3. COLOUR ROLES (what each colour is for)
	 * Styles use these, never the swatches above. To change what
	 * a button looks like, point its role at a different swatch.
	 * ============================================================ */

	--jm-colour-background:  var(--jm-colour-dark-1);    /* page background */
	--jm-colour-surface:     var(--jm-colour-dark-2);    /* panels and cards that sit on the page */
	--jm-colour-text:        var(--jm-colour-light-1);   /* body text */
	--jm-colour-text-soft:   var(--jm-colour-light-2);   /* hints, help text */
	--jm-colour-heading:     var(--jm-colour-accent-1);  /* headings */
	--jm-colour-link:        var(--jm-colour-accent-1);  /* links */
	/* ONE action colour for everything you press (Nick, 19 Oct): Play, Post, main buttons.
	   The leaflet's cover colours only paint surfaces, never buttons. Change the action here, once. */
	--jm-colour-action:      var(--jm-colour-accent-1);  /* sand, like the play button */
	--jm-colour-action-text: var(--jm-colour-dark-1);
	--jm-colour-button:      var(--jm-colour-action);    /* main buttons */
	--jm-colour-button-text: var(--jm-colour-action-text);
	--jm-colour-disabled:    var(--jm-colour-light-2);   /* greyed-out buttons */
	--jm-colour-required:    var(--jm-colour-accent-1);  /* wizard: must-fill slots */
	--jm-colour-flavour:     var(--jm-colour-accent-3);  /* wizard: flavour slots */
	--jm-colour-extra:       var(--jm-colour-light-1);   /* wizard: extra slots */
	--jm-colour-header:      color-mix(in srgb, var(--jm-colour-dark-1) 78%, #000); /* header bar, leaflet head: a shade darker than the page */
	--jm-colour-field:       color-mix(in srgb, var(--jm-colour-dark-1) 88%, #000);  /* form field background */
	--jm-colour-line:        color-mix(in srgb, var(--jm-colour-light-1) 18%, transparent); /* thin dividers */


	/* ============================================================
	 * 4. RATING COLOURS (score 0 to 7)
	 * Each rating points at the matching scale swatch.
	 * PHP only marks the score (data-rating="5"); CSS picks the colour.
	 * ============================================================ */

	--jm-colour-rating-0: var(--jm-colour-scale-0);  /* Unrated */
	--jm-colour-rating-1: var(--jm-colour-scale-1);  /* Not my vibe */
	--jm-colour-rating-2: var(--jm-colour-scale-2);  /* It's ok */
	--jm-colour-rating-3: var(--jm-colour-scale-3);  /* Good bits */
	--jm-colour-rating-4: var(--jm-colour-scale-4);  /* I like it */
	--jm-colour-rating-5: var(--jm-colour-scale-5);  /* Great mix! */
	--jm-colour-rating-6: var(--jm-colour-scale-6);  /* Amazing mix! */
	--jm-colour-rating-7: var(--jm-colour-scale-7);  /* Extraordinary!! */


	/* ============================================================
	 * 5. TYPE (fonts and text sizes)
	 * PLACEHOLDER font (Montserrat, loaded in functions.php) until the
	 * real fonts are chosen. Change the name here only.
	 * ============================================================ */

	--jm-font-body:    "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
	--jm-font-display: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;

	--jm-text-xxs: 0.625rem;  /* tiny labels on covers */
	--jm-text-xs: 0.75rem;
	--jm-text-s:  0.875rem;
	--jm-text-m:  1rem;
	--jm-text-l:  1.25rem;
	--jm-text-xl: 1.75rem;

	/* Helper text: a quiet aside next to a title or label, e.g. "Tray (unused)" (Nick, 20 Oct).
	   One rule, one place: .jm-helper in 10-base.css reads these. The full type scale and its
	   colour steps get settled in the styling pass. */
	--jm-text-helper:   var(--jm-text-xs);
	--jm-colour-helper: var(--jm-colour-text-soft);


	/* ============================================================
	 * 6. SPACE (one scale for all gaps and padding)
	 * ============================================================ */

	--jm-space-1: 0.25rem;
	--jm-space-2: 0.5rem;
	--jm-space-3: 1rem;
	--jm-space-4: 1.5rem;
	--jm-space-5: 2rem;
	--jm-space-6: 3rem;


	/* ============================================================
	 * 7. SHAPE (corners and shadows)
	 * --jm-radius-button is the "change every button at once" token; --jm-radius-block does the same for every
	 * block, box, card and pop-up (square, Nick 24 Oct).
	 * ============================================================ */

	--jm-radius-s:      4px;
	--jm-radius-m:      10px;   /* wizard slots, cards */
	--jm-radius-block:  0;      /* blocks, boxes, cards and pop-ups (was --jm-radius-l, 16px): set to 16px for rounded */
	--jm-radius-button: 999px;  /* full pill, as in Cat's wireframes; set to 0 for square */
	--jm-control-size:  44px;   /* one height for pressable things: buttons, Play, Send, the comment box (big enough to tap) */

	--jm-shadow-1: 0 2px 6px rgba(0, 0, 0, 0.25);
	--jm-shadow-2: 0 8px 24px rgba(0, 0, 0, 0.35);
	--jm-shadow-3: 0 18px 60px rgba(0, 0, 0, 0.55);   /* pop-ups and leaflets */

	/* Fades laid over pictures so text and buttons on them always read. */
	--jm-fade-card: linear-gradient(to top, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 38%);   /* bottom of a cover */
	--jm-fade-play: linear-gradient(to top, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0) 45%);  /* the leaflet's Play block */

	/* See-through surfaces (frosted glass over the covers). */
	--jm-colour-chip:  color-mix(in srgb, var(--jm-colour-light-1) 90%, transparent);      /* the card's "+" box */
	--jm-colour-glass: color-mix(in srgb, var(--jm-colour-dark-1) 35%, transparent);       /* floating Filter pill */
	--jm-colour-label: var(--jm-colour-dark-1);                                             /* status label on a cover (solid) */
	--jm-glass-blur:   10px;

	/* Flavour block backgrounds (a texture behind a text block in a Front square; Nick, 29-31 Oct). The words always
	   sit in a frame, the opposite extreme of the text colour. */
	--jm-block-bg-frame:         65%;   /* the frame behind the words */
	--jm-block-bg-cover-zoom:    2.5;   /* the cover art: this many times the square (A and B meet at the cover's centre) */
	--jm-block-bg-cover-opacity: 0.5;   /* the cover art, in its own colours */
	--jm-block-bg-image-opacity: 0.3;   /* your picture, greyscale and toned (blend: --jm-panel-texture-blend) */
	/* The block's text over a picture: the mix's own colour pushed out of the midtones (Nick, 29 Oct), so it reads. */
	--jm-block-bg-ink-darken:  45%;   /* dark text: mixed with this much black */
	--jm-block-bg-ink-lighten: 60%;   /* light text: mixed with this much white */

	/* The words in a Front flavour square (Nick, 30-31 Oct: no words past the edges). Sized from the square itself
	   (cqi = 1% of the square's width), so what fits a big square fits a small one too. Three steps by how long the main
	   words are (parts/flavour.php adds jm-block--len-m / -l), each capped for big squares. The longest text each type
	   allows (jm-core blocks.php limits) was tested at 220-700px squares: bigger words need shorter limits, not bigger
	   numbers here. */
	--jm-block-text-s:     min(6cqi, var(--jm-text-l));    /* short: a line or two */
	--jm-block-text-m:     min(5.2cqi, var(--jm-text-l));  /* medium */
	--jm-block-text-l:     min(4.6cqi, var(--jm-text-m));  /* long: a full quote, a long Note */
	--jm-block-text-small: min(4.6cqi, var(--jm-text-xs)); /* the small lines (who said it, the lead, a caption): one size */
	--jm-block-pad:        8%;      /* space round the words, of the square's width */
	--jm-block-pad-l:      5%;      /* the same, for the longest step (more room for the words) */
	--jm-block-frame-pad:  4% 6%;   /* inside the frame */

	/* The panels' texture: the customization bar's picture, faint behind the Article and Comments. Your picture is
	   greyscale and toned into the panel's colour; the cover art keeps a little of its own colour. */
	--jm-panel-texture-opacity: 0.15;         /* how strongly it shows */
	--jm-panel-texture-blend:   luminosity;   /* your picture: luminosity = toned to the panel; normal = plain greyscale */


	/* ============================================================
	 * 8. MOTION (see the Pop-ups and Motion doc)
	 * Tiny: under a third of a second, a few pixels, fast start, gentle stop.
	 * ============================================================ */

	--jm-motion-time:    250ms;  /* how long a pop-up takes to arrive */
	--jm-motion-stagger: 35ms;   /* gap between leaflet blocks appearing */
	--jm-motion-rise:    8px;    /* how far it travels into place */
	--jm-ease-out:       cubic-bezier(0.2, 0.8, 0.2, 1);
	--jm-motion-time-leaflet: 520ms;                          /* the leaflet's entrance: quick start, long slow ending */
	--jm-ease-silk:      cubic-bezier(0.16, 1, 0.3, 1);       /* steep start, glides to a stop */


	/* ============================================================
	 * 9. POP-UP BACKDROP (the page behind a pop-up)
	 * ============================================================ */

	--jm-backdrop-blur:  6px;
	--jm-backdrop-dim:   rgba(20, 24, 25, 0.55);
	--jm-backdrop-grain: 0.08;   /* 0 = no grain */


	/* ============================================================
	 * 10. LAYOUT
	 * ============================================================ */

	--jm-page-width:     1200px; /* widest the wall of covers grows */
	--jm-leaflet-width:  1000px; /* widest a leaflet pop-up grows */
	--jm-leaflet-stacked-width: 480px; /* widest the stacked (phone) leaflet grows, on a tablet or narrow window */
	--jm-block-unit-max: 340px;  /* biggest one leaflet block (a square) gets on a large screen */
	--jm-block-unit-min: 240px;  /* smallest it gets (desktop): on a shorter window the leaflet scrolls instead */
	--jm-header-height:  64px;
	--jm-popup-width:    440px;  /* small pop-ups: log in, welcome */
}


/* ---------- Per-mix colours ----------
 * Set on each leaflet from its cover (style="--jm-tone-bg: ..."). These are the
 * fallbacks when a mix has none. Every block reads them. */
:root {
	--jm-tone-bg:  var(--jm-colour-dark-1);
	--jm-tone-ink: var(--jm-colour-light-1);
}